/*
 * Pessoal e folha — as duas telas que falam de gente.
 *
 * A de funcionários é uma grade de rostos, e não uma tabela: quem abre está
 * procurando uma pessoa, e pessoa se reconhece pela cara antes do nome. A da
 * folha é tabela mesmo — ali o que se procura é número, e número se confere
 * em coluna.
 */

/* ── A grade de funcionários ──────────────────────────────────────────────── */

.fnc-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
}

.fnc-cartao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  width: 100%;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 11px 12px;
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.fnc-cartao:hover {
  border-color: var(--navy-texto);
  box-shadow: var(--sombra-sm);
  transform: translateY(-1px);
}
/* Desligado continua visível porque a folha de março precisa de um rosto. */
.fnc-cartao[data-inativo='1'] { opacity: .58; }

.fnc-foto {
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cinza-suave);
  border: 1px solid var(--linha);
}

.fnc-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--navy-texto);
  letter-spacing: .02em;
}

.fnc-topo { display: flex; align-items: center; gap: 11px; }

.fnc-texto { flex: 1; min-width: 0; }

/*
 * Tudo que é texto de cartão corta com reticências em vez de quebrar linha.
 * Um telefone partido em três linhas muda a altura do cartão e desalinha a
 * grade inteira — e ninguém lê um telefone quebrado de qualquer jeito.
 */
.fnc-texto > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnc-nome {
  display: block;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnc-texto .sub { display: block; font-size: var(--t-sm); color: var(--texto-2); }
.fnc-contato {
  display: block;
  font-size: var(--t-sm);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.fnc-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 55px;
}

/*
 * A falta do contato de emergência é a única coisa que esta tela cobra, e
 * cobra em vermelho: é o campo que só se descobre vazio no pior dia.
 */
.fnc-alerta {
  font-size: var(--t-xs);
  color: var(--tijolo);
  background: var(--tijolo-suave);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  white-space: nowrap;
}

/* ── A folha ──────────────────────────────────────────────────────────────── */

.flh-lista { display: flex; flex-direction: column; gap: 8px; }

.flh-folha {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.flh-folha:hover { border-color: var(--navy-texto); box-shadow: var(--sombra-sm); }
/* Aberta é rascunho, e a tarja âmbar diz isso antes de qualquer leitura. */
.flh-folha[data-situacao='aberta'] { border-left-color: var(--ambar); }
.flh-folha[data-situacao='fechada'] { border-left-color: var(--verde); }

.flh-mes { flex: 1; min-width: 0; }
.flh-mes .nome { display: block; font-size: var(--t-md); font-weight: 600; text-transform: capitalize; }
.flh-mes .sub { display: block; font-size: var(--t-sm); color: var(--texto-2); }

.flh-numeros { text-align: right; flex: none; }
.flh-numeros .valor {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.flh-numeros .sub { display: block; font-size: var(--t-xs); color: var(--texto-3); }

/* ── As retiradas dos sócios ──────────────────────────────────────────────── */

.flh-socios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.flh-socio {
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.flh-socio .nome { display: block; font-size: var(--t-md); font-weight: 600; }
.flh-socio .sub { display: block; font-size: var(--t-xs); color: var(--texto-2); margin-top: 1px; }
.flh-socio .valor {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}

@media (max-width: 720px) {
  .fnc-grade { grid-template-columns: 1fr; }
  .flh-folha { flex-wrap: wrap; }
  .flh-numeros { text-align: left; }
}

/* ── Os três números da folha ─────────────────────────────────────────────── */

/*
 * Custo, remuneração e líquido lado a lado, e nessa ordem.
 *
 * São três respostas diferentes para "quanto é a folha", e cada uma serve a
 * uma pessoa: o custo é do sócio que orça a obra, a remuneração é do contador,
 * o líquido é de quem vai pagar hoje. Mostrar só um deles faz os outros dois
 * saírem da conversa.
 */
.flh-tres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.flh-numero {
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 11px 13px;
}
.flh-numero[data-destaque='1'] {
  background: var(--cartao);
  border-color: var(--navy-texto);
}

.flh-numero .rotulo {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-3);
}
.flh-numero .valor {
  display: block;
  font-size: var(--t-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-top: 3px;
}
.flh-numero .nota { display: block; font-size: var(--t-xs); color: var(--texto-2); margin-top: 3px; }

/* O que foi retido do salário: sai da pessoa, mas não some — vai em guia. */
.flh-retido { color: var(--tijolo); font-variant-numeric: tabular-nums; }

/* ── As tabelas de encargo ────────────────────────────────────────────────── */

.flh-tabelas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

.flh-tabela {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 11px 13px;
  background: var(--cartao-2);
}
/* Desativada continua visível: é ela que explica a folha do ano passado. */
.flh-tabela[data-inativa='1'] { opacity: .55; }

.flh-tabela .topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.flh-tabela .nome { display: block; font-size: var(--t-md); font-weight: 600; }
.flh-tabela .topo .sub { display: block; font-size: var(--t-sm); color: var(--texto-2); margin-top: 1px; }

.flh-tabela .faixas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}

.flh-tabela .faixa {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--t-sm);
  padding: 5px 8px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.flh-tabela .faixa .aliq { font-weight: 600; color: var(--navy-texto); margin-left: auto; }
.flh-tabela .faixa .sub { font-size: var(--t-xs); color: var(--texto-3); }

.flh-faixas-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

.flh-faixa-linha {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 8px;
  align-items: center;
}
.flh-faixa-linha:has(> :nth-child(4)) { grid-template-columns: 1fr 90px 1fr auto; }

@media (max-width: 720px) {
  .flh-faixa-linha,
  .flh-faixa-linha:has(> :nth-child(4)) { grid-template-columns: 1fr 72px auto; }
}

/* ── O vínculo do efetivo com a folha ─────────────────────────────────────── */

/*
 * O selo que aparece na linha do diário quando o nome bate com uma ficha.
 *
 * É pequeno de propósito: a informação importa na hora de digitar — "pegou" —
 * e não depois. Grande, competiria com o nome que a pessoa está escrevendo.
 */
.diario-na-folha {
  align-self: center;
  font-size: var(--t-xs);
  color: var(--verde-escuro);
  background: rgba(122, 154, 94, .14);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  white-space: nowrap;
}

/* ── A porta do Google na tela de login ───────────────────────────────────── */

/*
 * Vem acima do formulário de senha porque, para quem está na obra, entrar com
 * a conta do celular é o caminho normal — a senha é a exceção.
 */
.login-google { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.login-google .btn-login { width: 100%; justify-content: center; }
/* A nota do bloco fica colada no botão, e não com o respiro da nota do rodapé. */
.login-google .login-nota { margin: 0; }

/* O separador que diz que as duas portas levam ao mesmo lugar. */
.login-ou {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  color: var(--texto-3);
  font-size: var(--t-sm);
}
.login-ou::before,
.login-ou::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linha);
}

/* ── A tabela da folha ────────────────────────────────────────────────────── */

/*
 * Nove colunas não cabem em 780px, e a última é a que mais importa depois de
 * fechar — o holerite. Três decisões resolvem sem esconder nada:
 *
 *   **Número não quebra linha.** "− R$ 229,41" partido em duas linhas dobra a
 *   altura de cada linha e não fica mais legível por isso.
 *
 *   **O nome fica preso à esquerda.** Rolando para ver o líquido, some a
 *   referência de quem é a linha — que é o único jeito de conferir errado.
 *
 *   **O holerite é ícone.** A palavra escrita custava 70px numa coluna que é
 *   um clique, e era ela que empurrava a tabela para fora do modal.
 */
.tabela-folha { min-width: 760px; }

.tabela-folha th,
.tabela-folha td { white-space: nowrap; }

.tabela-folha td:first-child,
.tabela-folha th:first-child {
  position: sticky;
  left: 0;
  background: var(--cartao);
  z-index: 1;
  max-width: 250px;
  white-space: normal;
}
.tabela-folha th:first-child { background: var(--cartao-2); }

.tabela-folha td:first-child > span:first-child {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O botão do holerite: só o ícone, com o nome da pessoa no title. */
.tabela-folha .btn .rotulo-btn:empty { display: none; }
.tabela-folha .btn { padding-left: 8px; padding-right: 8px; }