/* ============================================================================
   ferramentas.css — casca do ambiente /ferramentas/
   ----------------------------------------------------------------------------
   Ambiente separado do site de marketing: topbar fina, sidebar de navegação e
   área de trabalho. NÃO carrega site.css / institucional.css / responsive.css —
   aquelas três são o cabeçalho de marketing, o mega-menu e o rodapé de quatro
   colunas, justamente o que este ambiente não tem.

   O que ele carrega de fora:
     fonts.css   → as fontes self-hosted
     styles.css  → o build do Tailwind, que traz o preflight e as variáveis
                   --font-heading / --font-sans usadas aqui

   ARMADILHA DO BUILD (mesma de site.css e diagnostico.css): o preflight do
   Tailwind zera padding, margin e border com especificidade (16,0,0) e, em
   `button`/`input`, também background-color, color e border-radius. Toda regra
   dessas propriedades aqui precisa de !important.

   As media queries são mobile-last (max-width), como no resto do projeto.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TOKENS DE SUPERFÍCIE — cópia do bloco de css/site.css
   ----------------------------------------------------------------------------
   Este ambiente não carrega site.css, então os tokens do card precisam existir
   aqui também. Mudou um valor, mude nos dois arquivos.
   --------------------------------------------------------------------------- */

:root {
  --card-bg: #1c1c1c;
  --card-borda: #2b2b2b;
  --card-bg-hover: #232323;
  --card-borda-hover: #3a3a3a;
}

:root {
  /* Altura da topbar. Vive numa variável porque três coisas dependem dela: o
     topo do sticky da sidebar, a altura útil da sidebar e o offset do
     formulário do diagnóstico (--diag-sticky-top, logo abaixo). */
  --ferr-topbar: 57px;

  /* diagnostico.css lê esta variável para grudar o formulário lateral. Fora
     deste ambiente ela não existe e o valor cai no padrão de lá (132px, que é
     a altura do header de marketing). */
  --diag-sticky-top: calc(var(--ferr-topbar) + 24px);
}

/* ---------------------------------------------------------------------------
   Topbar
   --------------------------------------------------------------------------- */

.ferr-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--ferr-topbar);
  padding: 0 20px !important;
  border-bottom: 1px solid #1c1c1c !important;
  background: #080808;
}

.ferr-topbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ferr-topbar__logo img {
  display: block;
  width: 106px;
  height: auto;
}

/* Barra vertical entre o logo e o nome do ambiente, como na referência. */
.ferr-topbar__sep {
  width: 1px;
  height: 20px;
  background: #2b2b2b;
}

.ferr-topbar__nome {
  font-size: 14px;
  font-weight: 500;
  color: #f4f4f4;
  margin: 0 !important;
}

.ferr-topbar__acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto !important;
}

.ferr-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px !important;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.18s, background-color 0.18s;
}

.ferr-link:hover {
  color: #f4f4f4;
  background: #141414;
}

.ferr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px !important;
  white-space: nowrap;
  border: 0 !important;
  border-radius: 12px !important;
  background: #161ba9 !important;
  color: #f4f4f4 !important;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s;
}

.ferr-btn:hover {
  background: #1f26cf !important;
}

/* Um botão, dois comportamentos, a mesma promessa ao usuário ("mostrar/esconder
   o menu"): no desktop recolhe a sidebar, no mobile abre a gaveta. */
.ferr-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #f4f4f4 !important;
  cursor: pointer;
}

.ferr-menu-btn:hover {
  background: #141414 !important;
}

.ferr-menu-btn svg {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------------------------
   Estrutura: sidebar + área de trabalho
   --------------------------------------------------------------------------- */

.ferr-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
}

/* Sidebar recolhida no desktop. A classe fica no <html> e é aplicada por um
   script inline no <head>, antes da primeira pintura — se esperasse o
   ferramentas.js (que carrega no fim do <body>), o menu apareceria aberto e
   sumiria na frente do usuário a cada troca de página.

   min-width e não max-width, contra a convenção do resto do arquivo: abaixo de
   1024px a sidebar é a gaveta do mobile e um `display: none` vindo daqui a
   deixaria impossível de abrir. A regra precisa valer só onde ela é coluna. */
@media (min-width: 1024px) {
  .ferr-recolhido .ferr-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferr-recolhido .ferr-sidebar {
    display: none;
  }
}

.ferr-sidebar {
  position: sticky;
  top: var(--ferr-topbar);
  /* Altura da janela menos a topbar: é o que permite o rodapé da sidebar ficar
     colado embaixo e a lista rolar sozinha quando crescer. */
  height: calc(100vh - var(--ferr-topbar));
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1c1c1c !important;
  background: #080808;
}

.ferr-sidebar__lista {
  flex: 1;
  overflow-y: auto;
  padding: 20px 12px !important;
}

.ferr-sidebar__titulo {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  padding: 0 10px !important;
  margin: 0 0 10px !important;
}

.ferr-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Filho direto, não descendente: o item "em breve" é um <span> que contém
   outro <span> (o selo). Sem o `>`, o selo herdaria o padding e o display do
   item e viraria uma caixa do tamanho da linha. */
.ferr-nav > a,
.ferr-nav > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px !important;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.18s, background-color 0.18s;
}

.ferr-nav > a:hover {
  color: #f4f4f4;
  background: #141414;
}

/* Página atual. aria-current="page" é o que marca — a classe seria uma segunda
   fonte de verdade que poderia divergir do que o leitor de tela anuncia. */
.ferr-nav > a[aria-current='page'] {
  color: #f4f4f4;
  background: #16161c;
  box-shadow: inset 2px 0 0 #161ba9;
}

/* Ferramenta ainda não publicada: <span>, não <a>. Sem href não há link morto
   nem item que o Google tente rastrear. */
.ferr-nav > span {
  color: rgba(255, 255, 255, 0.25);
  cursor: default;
}

.ferr-nav__breve {
  flex-shrink: 0;
  margin-left: auto !important;
  padding: 2px 6px !important;
  border-radius: 999px;
  border: 1px solid #242424 !important;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.3);
}

.ferr-sidebar__rodape {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px !important;
  border-top: 1px solid #1c1c1c !important;
}

.ferr-sidebar__rodape a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px !important;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.18s, background-color 0.18s;
}

.ferr-sidebar__rodape a:hover {
  color: #f4f4f4;
  background: #141414;
}

.ferr-sidebar__rodape svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Fundo escuro que cobre o conteúdo quando a gaveta abre no mobile. */
.ferr-overlay {
  display: none;
  position: fixed;
  inset: var(--ferr-topbar) 0 0 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------------
   Área de trabalho
   --------------------------------------------------------------------------- */

.ferr-main {
  min-width: 0;
  padding: 44px 48px 96px !important;
}

.ferr-page {
  max-width: 1180px;
}

.ferr-page__cab {
  margin-bottom: 40px !important;
}

.ferr-page__titulo {
  font-family: var(--font-heading);
  font-size: clamp(28px, calc(21.5px + 1.81vw), 40px) !important;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #f4f4f4;
  margin: 0 0 12px !important;
}

.ferr-page__sub {
  max-width: 620px;
  font-size: clamp(15px, calc(13.9px + 0.3vw), 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   Cards do hub
   --------------------------------------------------------------------------- */

.ferr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.ferr-card {
  display: flex;
  flex-direction: column;
  padding: 22px !important;
  border: 1px solid var(--card-borda) !important;
  border-radius: 16px;
  background: var(--card-bg);
  text-decoration: none;
  transition: border-color 0.18s, background-color 0.18s;
}

.ferr-card[href]:hover {
  border-color: #3a3a3a !important;
  background: var(--card-bg-hover);
}

.ferr-card__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px !important;
  border-radius: 10px;
  background: #1a1a1a;
  color: #f4f4f4;
}

.ferr-card__ico svg {
  width: 18px;
  height: 18px;
}

.ferr-card__nome {
  font-family: var(--font-heading);
  font-size: 16px !important;
  font-weight: 500;
  color: #f4f4f4;
  margin: 0 0 8px !important;
}

.ferr-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 !important;
}

/* Card de ferramenta não publicada: é <div>, não <a>. */
.ferr-card--breve {
  opacity: 0.45;
}

.ferr-card--breve .ferr-card__ico {
  background: #141414;
  color: rgba(255, 255, 255, 0.5);
}

.ferr-card__tag {
  align-self: flex-start;
  margin-top: 14px !important;
  padding: 3px 8px !important;
  border-radius: 999px;
  border: 1px solid #242424 !important;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .ferr-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A sidebar vira gaveta: sai do fluxo e desliza da esquerda. */
  .ferr-sidebar {
    position: fixed;
    top: var(--ferr-topbar);
    left: 0;
    z-index: 30;
    width: 264px;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .ferr-sidebar.is-aberta {
    transform: translateX(0);
  }

  .ferr-overlay.is-visivel {
    display: block;
  }

  .ferr-main {
    padding: 32px 20px 72px !important;
  }
}

@media (max-width: 767px) {
  .ferr-topbar {
    padding: 0 12px !important;
  }

  /* Em 375px sobram ~351px úteis e os cinco elementos da topbar pedem ~378.
     Somem o link "Ir para o site" (o rodapé da sidebar tem "Site") e o
     separador + nome do ambiente — o título da sidebar e o h1 da página já
     dizem onde o usuário está. Ficam hambúrguer, logo e o CTA. */
  .ferr-topbar .ferr-link,
  .ferr-topbar__sep,
  .ferr-topbar__nome {
    display: none;
  }

  .ferr-main {
    padding: 28px 20px 64px !important;
  }

  .ferr-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ferr-sidebar {
    transition: none;
  }
}