/* RADAR — tela Pessoal > Ferramentas (25/09/2026). Usa as variaveis do Radar. */

/* Rotulo do grupo no trilho ("Pessoal"), acima do botao Ferramentas. */
.trilho .trilho-grupo{
  margin: 14px 12px 4px; font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3);
}

/* A tela ocupa a altura toda; quem rola e a ferramenta, dentro do quadro. */
main.conteudo[data-vista="ferramentas"][data-ativa]{
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
#ferramentas-tela{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#ferramentas-tela > [hidden]{ display: none !important; }

.fr-lista{ overflow-y: auto; min-height: 0; }
.fr-cabeca{ margin: 2px 0 18px; }
.fr-eyebrow{ font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.fr-cabeca h2{ font-family: var(--titulo); font-size: 22px; font-weight: 600; letter-spacing: .2px; margin: 6px 0 6px; color: var(--texto); }
.fr-cabeca p{ margin: 0; color: var(--texto-2); font-size: 13px; max-width: 720px; }

.fr-grade{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fr-cartao{
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px;
  text-align: left; cursor: pointer; font: inherit; color: var(--texto);
  padding: 18px 20px; border-radius: var(--r-lg, 16px);
  border: 1px solid var(--linha-2);
  background: radial-gradient(120% 90% at 0% 0%, rgba(229,177,58,.08), transparent 55%), linear-gradient(180deg, var(--carta) 0%, var(--tinta-2) 100%);
  box-shadow: var(--sombra);
  transition: border-color .15s, transform .15s, background .15s;
}
.fr-cartao:hover{ border-color: var(--linha); transform: translateY(-1px); }
.fr-cartao:focus-visible{ outline: 2px solid var(--ouro); outline-offset: 2px; }
.fr-icone{
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(229,177,58,.10); border: 1px solid rgba(229,177,58,.25); color: var(--ouro);
}
.fr-icone svg{ width: 22px; height: 22px; }
.fr-texto{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fr-tag{ font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.fr-texto b{ font-family: var(--titulo); font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.fr-desc{ font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
.fr-ir{ font-size: 12px; font-weight: 700; color: var(--ouro); white-space: nowrap; }

.fr-aberta{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.fr-barra{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-titulo{ display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.fr-titulo b{ font-family: var(--titulo); font-size: 18px; font-weight: 600; letter-spacing: .2px; color: var(--texto); }
.fr-barra .fr-titulo{ order: 1; }
.fr-barra [data-fr-voltar]{ order: 0; }
.fr-barra [data-fr-recarregar]{ order: 2; }
.fr-barra [data-fr-aba]{ order: 3; }
.fr-botao{
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(229,177,58,.35); background: rgba(229,177,58,.08); color: var(--ouro-viva);
}
.fr-botao:hover{ background: rgba(229,177,58,.18); }
.fr-quadros{ flex: 1 1 auto; min-height: 0; display: flex; }
.fr-quadro{
  flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid var(--linha-2);
  border-radius: var(--r, 12px); background: var(--fundo); box-shadow: var(--sombra);
}
.fr-quadro[hidden]{ display: none; }

@media (max-width: 1000px){ .fr-grade{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px){
  .trilho .trilho-grupo{ display: none; }
  main.conteudo[data-vista="ferramentas"][data-ativa]{ overflow: visible; }
  .fr-quadro{ min-height: 78vh; }
  .fr-cartao{ grid-template-columns: 36px 1fr; }
  .fr-ir{ display: none; }
}