/* ==========================================================================
   Complemento do funil.css — só o que as telas novas trouxeram: tabelas da
   área administrativa, avisos de sistema e a barra de navegação interna.

   Nenhuma cor nova: tudo sai das variáveis já definidas em funil.css, para a
   área administrativa não parecer outro produto.
   ========================================================================== */

/* --- Avisos (flash) ------------------------------------------------------ */
.avisos{margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.aviso{padding:12px 16px;border-radius:10px;font-size:14px;
  border:1px solid var(--borda);background:var(--superficie);color:var(--ink)}
.aviso.ok{border-color:var(--bom);background:color-mix(in srgb,var(--bom) 8%,var(--superficie))}
.aviso.erro{border-color:var(--critico);
  background:color-mix(in srgb,var(--critico) 8%,var(--superficie));
  color:var(--critico-texto)}
.aviso.aviso-atencao{border-color:var(--ouro)}

/* --- Navegação interna --------------------------------------------------- */
.nav-admin{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.nav-admin a{padding:8px 14px;border-radius:999px;text-decoration:none;
  font-size:13.5px;color:var(--ink2);border:1px solid var(--borda);
  background:var(--superficie)}
.nav-admin a:hover{color:var(--ink)}
.nav-admin a.ativo{background:var(--ouro);border-color:var(--ouro);color:#101010;
  font-weight:600}

/* --- Tabelas ------------------------------------------------------------- */
.rolagem{overflow-x:auto;border:1px solid var(--borda);border-radius:12px;
  background:var(--superficie)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:11px 14px;color:var(--ink2);font-weight:600;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;
  background:var(--superficie-2);border-bottom:1px solid var(--borda);
  white-space:nowrap;position:sticky;top:0;z-index:1}
td{padding:11px 14px;border-bottom:1px solid var(--grade);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--superficie-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td .sub{display:block;color:var(--ink3);font-size:12px;margin-top:2px}
tr.inativo td{opacity:.5}

/* --- Escolha do papel, na criação do acesso ------------------------------ */
.papeis{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:8px;margin-top:2px}
/* Os seletores daqui em diante são prefixados com `.papeis` de propósito.
   A opção é um <label> dentro de um `.campo`, e `.campo label` (0-1-1) já
   define tipografia de rótulo de formulário: sem o prefixo, `.papel-opcao`
   (0-1-0) perde e a descrição inteira sai em caixa alta. */
.papeis .papel-opcao{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--borda);border-radius:10px;background:var(--superficie);
  cursor:pointer;font-size:13px;color:var(--ink2);line-height:1.45;
  font-weight:400;text-transform:none;letter-spacing:normal}
.papeis .papel-opcao:hover{border-color:var(--eixo)}
/* `width:auto` não é redundante: `.campo input{width:100%}` empata em
   especificidade e, sem isto, o rádio esticava por todo o cartão, empurrando o
   texto para uma coluna de largura zero que transbordava para fora da tela. */
.papeis .papel-opcao input{margin-top:2px;flex:0 0 auto;width:auto;
  accent-color:var(--ouro)}
.papeis .papel-opcao b{display:block;color:var(--ink);font-size:13.5px;
  font-weight:600;margin-bottom:1px}
/* Escolhido fica evidente: é a decisão de quem escreve e quem só olha. */
.papeis .papel-opcao:has(input:checked){border-color:var(--ouro);
  box-shadow:inset 0 0 0 1px var(--ouro)}
.papeis .papel-opcao:focus-within{outline:2px solid var(--ouro);outline-offset:1px}

/* --- Etiquetas de papel -------------------------------------------------- */
.papel{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;border:1px solid var(--borda);color:var(--ink2);white-space:nowrap}
.papel-admin{border-color:var(--ouro);color:var(--dado)}
.papel-gestor{border-color:var(--bom);color:var(--ok-texto)}

/* --- Formulários em linha (dentro de tabela) ----------------------------- */
.linha-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.linha-form input,.linha-form select{padding:6px 10px;border-radius:7px;
  border:1px solid var(--borda);background:var(--plano);color:var(--ink);
  font:inherit;font-size:13px}
.linha-form .btn{padding:6px 12px;font-size:13px}

/* --- Caixa de conteúdo genérica ----------------------------------------- */
.bloco{margin-bottom:32px}
.bloco > h2{margin:0 0 4px}
.bloco > p.legenda-secao{margin:0 0 14px}
.centro{max-width:560px;margin:0 auto}
.mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:12.5px}
.destaque-num{font-size:26px;font-weight:600;letter-spacing:-.5px}

/* --- Resultado da importação -------------------------------------------- */
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:12px;margin:16px 0}
.placar div{background:var(--superficie-2);border:1px solid var(--borda);
  border-radius:10px;padding:12px 14px}
.placar b{display:block;font-size:22px;font-weight:600;letter-spacing:-.4px}
.placar span{font-size:12px;color:var(--ink2)}
.lista-avisos{max-height:220px;overflow:auto;margin:0;padding-left:20px;
  font-size:13px;color:var(--ink2)}

/* --- Rodapé do login ----------------------------------------------------- */
.link-simples{color:var(--ink2);font-size:13px}
.link-simples:hover{color:var(--ink)}

/* --- Filtro de mês do funil ---------------------------------------------
   Ligado, ele esconde cartas. Precisa ficar evidente que está ligado, senão
   alguém procura uma oportunidade que está ali, só filtrada.
   ------------------------------------------------------------------------ */
.barra-mes{margin-bottom:20px}
.barra-mes.ligada{border-left:3px solid var(--ouro);padding-left:12px}
select.filtro.ligado{border-color:var(--ouro);
  box-shadow:inset 0 0 0 1px var(--ouro);font-weight:600}
.barra-mes.ligada .contador{color:var(--dado);font-weight:600}

/* ==========================================================================
   Lembretes da próxima ação

   Empilham no canto inferior direito e ficam até alguém dispensar. Um aviso
   que some sozinho depois de alguns segundos não serve para o que este é:
   quem estava longe do computador precisa encontrá-lo ao voltar.
   ========================================================================== */
.lembretes{position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;gap:10px;
  width:min(340px,calc(100vw - 40px));pointer-events:none}
.lembretes:empty{display:none}

.lembrete{pointer-events:auto;background:var(--superficie);color:var(--ink);
  border:1px solid var(--borda);border-left:4px solid var(--ouro);
  border-radius:12px;padding:14px 16px;box-shadow:var(--sombra-alta);
  animation:lembrete-entra .22s ease-out}
/* "Agora" e atrasado usam a cor de alerta — e o texto diz o mesmo, porque a
   cor sozinha nunca deve carregar o sentido. */
.lembrete.urgente{border-left-color:var(--critico)}

@keyframes lembrete-entra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lembrete{animation:none}
}

.lembrete-topo{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:6px}
.lembrete-quando{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--dado)}
.lembrete.urgente .lembrete-quando{color:var(--critico-texto)}
.lembrete-hora{font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.lembrete-empresa{font-weight:600;font-size:14.5px;line-height:1.3;
  letter-spacing:-.2px}
.lembrete-acao{color:var(--ink2);font-size:13.5px;margin-top:3px;line-height:1.4}
.lembrete-base{display:flex;gap:8px;margin-top:12px}
.lembrete-base .btn{padding:6px 13px;font-size:13px}