/*
 * Checklist ESEN — protótipo (Etapa A)
 * telas/equipe.css — #/equipe (abas Equipes | Usuários, gaveta de detalhe e modais). Prefixo .equipe-; só tokens.
 */

/* =========================================================================
   COMUNS
   ========================================================================= */
.equipe-voce { font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-normal); color: var(--cor-texto-3); white-space: nowrap; }
.equipe-contagem {
  display: inline-block; margin-left: var(--esp-1); padding: 1px 6px; border-radius: var(--raio-1);
  background: var(--cor-superficie-3); font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-forte);
  color: var(--cor-texto-2); font-variant-numeric: tabular-nums; vertical-align: 1px;
}
.equipe-vazio-curto { font-size: var(--fs-rotulo); line-height: 20px; color: var(--cor-texto-3); }
.equipe-nota { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-texto-2); }
.equipe-nota > .icone { flex: none; margin-top: 1px; color: var(--cor-texto-3); }

/* Números em linhas (equipe e gaveta): ícone de status colorido + rótulo + nota · valor neutro à direita + seta. */
.equipe-numeros { list-style: none; margin: 0; padding: 0; border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.equipe-numero {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--esp-3);
  min-height: 44px; padding: var(--esp-1) var(--esp-2); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
  color: inherit; text-decoration: none; transition: background-color var(--dur-rapida);
}
.equipe-numero:hover { background: var(--cor-superficie-2); }
.equipe-numero:hover .equipe-numero__rotulo { text-decoration: underline; text-underline-offset: 3px; }
.equipe-numero:focus-visible { outline-offset: -2px; }
.equipe-numero__icone { display: flex; }
.equipe-numero__icone .icone { width: 16px; height: 16px; stroke-width: var(--traco-icone-status); }
.equipe-numero__texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--esp-2); min-width: 0; }
.equipe-numero__rotulo { font-weight: var(--peso-forte); color: var(--cor-texto); }
.equipe-numero__nota { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.equipe-numero__valor { font-family: var(--fonte-titulo); font-size: var(--fs-secao); line-height: var(--lh-secao); font-weight: var(--peso-forte); color: var(--cor-texto); font-variant-numeric: tabular-nums; text-align: right; }
.equipe-numero__seta { display: flex; color: var(--cor-texto-3); }
.equipe-numero__seta .icone { width: 16px; height: 16px; }

/* =========================================================================
   ABA EQUIPES — um painel por equipe
   ========================================================================= */
.equipe-times { display: grid; gap: var(--esp-5); }
.equipe-time .painel__titulo:focus { outline: none; }
.equipe-time .painel__titulo:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: var(--foco-afastamento); border-radius: var(--raio-1); }
.equipe-time .painel__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipe-time--foco { border-color: var(--cor-borda-controle); }

.equipe-time__corpo { display: grid; gap: var(--esp-4); padding: var(--esp-4) var(--esp-5) var(--esp-5); }
.equipe-time__desc { max-width: var(--largura-leitura); color: var(--cor-texto-2); }
.equipe-time__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
.equipe-time__lado { display: grid; align-content: start; gap: var(--esp-5); min-width: 0; }
.equipe-time__membros { min-width: 0; }
.equipe-time__rodape { justify-content: flex-start; gap: var(--esp-2) var(--esp-6); }
.equipe-time__rodape .link-seta { min-height: 32px; }

.equipe-bloco { min-width: 0; }
.equipe-bloco__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); min-height: 32px; margin-bottom: var(--esp-2); }
.equipe-bloco__titulo { display: flex; align-items: center; font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-forte); color: var(--cor-texto-2); }
.equipe-bloco__extra { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }

/* Responsável */
.equipe-pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--esp-3); }
.equipe-pessoa__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.equipe-pessoa__nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.equipe-pessoa__meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-texto-2); }
.equipe-pessoa__status { margin-top: var(--esp-1); }

/* Membros */
.equipe-membros { list-style: none; margin: 0; padding: 0; border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.equipe-membro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-3);
  min-height: 52px; border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
}
.equipe-membro:last-child { border-bottom: 0; }
.equipe-membro__pessoa {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-width: 0; padding: var(--esp-2) 0;
  background: none; border: 0; border-radius: var(--raio-2); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.equipe-membro__pessoa:hover .equipe-membro__nome { text-decoration: underline; text-underline-offset: 3px; }
.equipe-membro__texto { display: flex; flex-direction: column; min-width: 0; }
.equipe-membro__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--peso-forte); }
.equipe-membro__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }
.equipe-membro__status { display: inline-flex; grid-column: 2; }
.equipe-membro > .btn { grid-column: 3; justify-self: end; }

/* =========================================================================
   ABA USUÁRIOS — tabela (desktop/notebook) e lista tocável (toque)
   ========================================================================= */
.equipe-tabela .equipe-col-perfil { width: 120px; }
.equipe-tabela .equipe-col-equipe { width: 168px; }
.equipe-tabela .equipe-col-status { width: 160px; }
.equipe-tabela .equipe-col-acesso { width: 132px; }
.equipe-tabela .equipe-col-acoes { width: 84px; }
@media (min-width: 1440px) {
  .equipe-tabela .equipe-col-perfil { width: 136px; }
  .equipe-tabela .equipe-col-equipe { width: 200px; }
  .equipe-tabela .equipe-col-acesso { width: 148px; }
}
.equipe-usuario { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.equipe-usuario > .avatar { flex: none; }
.equipe-usuario__linha { display: flex; align-items: baseline; gap: var(--esp-2); min-width: 0; }
.equipe-usuario__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: var(--peso-forte); }

.equipe-linha { grid-template-columns: auto minmax(0, 1fr) auto; }
.equipe-linha__avatar { display: flex; align-self: start; padding-top: 2px; }
.equipe-linha .linha__titulo .equipe-voce { font-size: var(--fs-legenda-toque); }
.equipe-linha__email { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto); }
@media (min-width: 768px) { .equipe-linha { grid-template-columns: auto minmax(0, 1fr) auto auto; } }

/* =========================================================================
   BLOCO "COMO FUNCIONAM OS PERFIS"
   ========================================================================= */
.equipe-perfis__lista { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.equipe-perfis__item { display: grid; align-content: start; gap: var(--esp-1); padding: var(--esp-4); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil); }
.equipe-perfis__item:last-child { border-bottom: 0; }
.equipe-perfis__nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-weight: var(--peso-forte); }
.equipe-perfis__seu {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: var(--borda-largura) solid var(--cor-borda); border-radius: var(--raio-1);
  font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-forte); color: var(--cor-texto-2);
}
.equipe-perfis__texto { color: var(--cor-texto-2); }
.equipe-perfis__notas { justify-content: flex-start; gap: var(--esp-2) var(--esp-6); padding-top: var(--esp-3); padding-bottom: var(--esp-3); }
@media (min-width: 1024px) {
  .equipe-perfis__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equipe-perfis__item { border-bottom: 0; border-right: var(--borda-largura) solid var(--cor-borda-sutil); padding: var(--esp-4) var(--esp-5); }
  .equipe-perfis__item:last-child { border-right: 0; }
}

/* =========================================================================
   GAVETA DE DETALHE DO USUÁRIO
   ========================================================================= */
.equipe-detalhe { display: grid; gap: var(--esp-6); }
.equipe-detalhe__topo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--esp-3); }
.equipe-detalhe__id { display: grid; gap: 2px; min-width: 0; }
.equipe-detalhe__nome { font-size: var(--fs-secao); line-height: var(--lh-secao); font-weight: var(--peso-forte); overflow-wrap: anywhere; }
.equipe-detalhe__email { color: var(--cor-texto-2); overflow-wrap: anywhere; }
.equipe-detalhe__badges { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
.equipe-detalhe__secao { display: grid; justify-items: start; gap: var(--esp-3); padding-top: var(--esp-5); border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.equipe-detalhe__secao > .ficha, .equipe-detalhe__secao > .equipe-numeros, .equipe-detalhe__secao > .linha-tempo { width: 100%; }
.equipe-detalhe__titulo { font-size: var(--fs-painel); line-height: var(--lh-painel); font-weight: var(--peso-forte); }
.equipe-detalhe__texto { overflow-wrap: anywhere; }
.equipe-detalhe__nota { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.equipe-detalhe__nota > .icone { flex: none; }
.equipe-detalhe .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.equipe-detalhe .ficha dd { overflow-wrap: anywhere; }
.equipe-gaveta .gaveta__rodape { justify-content: flex-start; }

/* =========================================================================
   MODAIS (convite, edição, vínculos)
   ========================================================================= */
.equipe-form__pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--esp-3); padding-bottom: var(--esp-4); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil); }
.equipe-form__nome { font-weight: var(--peso-forte); overflow-wrap: anywhere; }
.equipe-form__email { font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-texto-2); overflow-wrap: anywhere; }
.equipe-opcoes-lista { max-height: 360px; overflow-y: auto; padding: 2px; }
.equipe-opcao[hidden] { display: none; }

/* =========================================================================
   TOQUE (< 1024) e CELULAR (< 768)
   ========================================================================= */
@media (min-width: 768px) {
  .equipe-time__grade { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .equipe-time__grade { grid-template-columns: 340px minmax(0, 1fr); gap: var(--esp-8); }
}

@media (max-width: 1023px) {
  .equipe-voce, .equipe-bloco__extra, .equipe-membro__meta, .equipe-detalhe__nota { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .equipe-vazio-curto, .equipe-nota, .equipe-pessoa__meta, .equipe-form__email { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .equipe-bloco__titulo { font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
  .equipe-bloco__cab { min-height: var(--alvo-minimo); }
  .equipe-contagem { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .equipe-membro { min-height: 64px; }
  .equipe-membro__pessoa { min-height: var(--alvo-minimo); align-items: flex-start; }
  .equipe-membro__pessoa > .avatar { margin-top: 2px; }
  .equipe-membro__meta { white-space: normal; overflow: visible; }
  .equipe-time .painel__sub { white-space: normal; overflow: visible; font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .equipe-membro__nome { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .equipe-time__rodape .link-seta { min-height: var(--alvo-minimo); font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
  .equipe-perfis__texto, .equipe-perfis__nome { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .equipe-detalhe__titulo { font-size: var(--fs-secao-toque); line-height: var(--lh-secao-toque); }
  .equipe-detalhe__secao .link-seta { min-height: var(--alvo-minimo); font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
  .equipe-numero { min-height: 56px; }
  .equipe-numero__rotulo { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .equipe-numero__nota { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .equipe-numero__valor { font-size: var(--fs-secao-toque); line-height: var(--lh-secao-toque); }
}

@media (max-width: 767px) {
  .equipe-time__corpo { padding: var(--esp-4); }
  .equipe-time__rodape { flex-direction: column; align-items: flex-start; gap: 0; }
  .equipe-detalhe .ficha { grid-template-columns: minmax(0, 1fr); }
  /* Na folha inferior as ações seguem a ordem do código: editar primeiro, desativar por último. */
  .equipe-gaveta .gaveta__rodape { flex-direction: column; }
  .equipe-opcoes-lista { max-height: none; }
}

/* Senha temporária (redefinição pelo administrador) */
.equipe-senha-temp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-2); background: var(--cor-superficie-2); }
.equipe-senha-temp .mono { font-size: 20px; line-height: 28px; letter-spacing: 0.04em; user-select: all; }