/* hq/css/brand.css — Andreia Viana / Abundance Super Flow brand tokens
   Source: Guide Cononico da Marca/Andreia_Viana_Identidade_Visual_Preview.pdf */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@400;500;600&display=swap');
/* Icone canonico de HQs zero-build no ecossistema WG (2026-07-08) - Google
   Material Symbols Outlined, weight 300 / FILL 0, per
   wg-design-engine/tokens/wg-design-tokens.json ($meta.icon_system.canonical_hq).
   Substitui os chips de 2 letras provisorios da sidebar. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0,0');

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

/* Regra global obrigatoria: [hidden] SEMPRE vence, ponto final. CSS do autor
   bate a folha de estilo do user-agent mesmo com especificidade igual, entao
   qualquer regra futura (em qualquer arquivo, em qualquer HQ do ecossistema
   que importe este padrao) que declare "display" incondicional num seletor
   de classe/id vai silenciosamente anular `el.hidden = true` setado via JS,
   sem erro nenhum no console - o elemento so fica "visivelmente preso
   aberto/visivel". Ja aconteceu 2x nesta pagina com seletores DIFERENTES
   (.av-user-dropdown em 2026-07-08 cedo, .wg-sidebar-link no mesmo dia mais
   tarde, via applyRoleVisibility em sidebar.js) - resolver caso a caso nao
   escala. `!important` aqui e deliberado: e a UNICA forma de garantir que
   "escondido pelo atributo hidden" nunca perde pra um `display` declarado em
   qualquer stylesheet carregada depois desta, presente ou futura. */
[hidden] {
  display: none !important;
}

:root {
  --av-roxo: #8F3CC3;
  --av-lilas: #A67DFF;
  --av-rosa: #F06BBF;
  --av-dourado: #DB815A;
  --av-branco: #FFFFFF;
  --av-bg: #FBF8F6;
  --av-bg-card: #FFFFFF;
  --av-text: #2A2033;
  --av-text-muted: #7A6F85;
  --av-border: #ECE3F5;
  --av-gradient: linear-gradient(90deg, var(--av-lilas), var(--av-roxo), var(--av-rosa));
  --av-radius: 20px;
  --av-radius-sm: 12px;
}

body {
  font-family: 'Montserrat', -apple-system, sans-serif;
  color: var(--av-text);
  background: var(--av-bg);
  letter-spacing: 0.02em;
}

.av-heading, h1, h2 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.av-card {
  background: var(--av-bg-card);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  padding: 24px;
}

.av-button, button[type="submit"], button.av-primary {
  background: var(--av-gradient);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.av-input, input[type="email"], input[type="password"], input[type="text"], input[type="search"], input[type="date"] {
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  color: var(--av-text);
}

.av-nav a {
  font-family: 'Montserrat', sans-serif;
  color: var(--av-text-muted);
  text-decoration: none;
  margin-right: 20px;
  letter-spacing: 0.02em;
}
.av-nav a.active, .av-nav a[aria-current="page"] {
  color: var(--av-roxo);
  font-weight: 600;
}

/* Logo canonico (lockup oficial - simbolo flor de lotus + wordmark, ver
   00_DADOS_E_STATUS/ATUALIZACAO_LOGO_OFICIAL_CANONICO_20260704.md). Fica
   servido pelo mesmo deploy em /01_ENTREGAS_HTML/, referenciado direto
   em vez de duplicar o arquivo dentro de /hq/. */
.av-logo {
  display: block;
  height: 64px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 24px;
}
.av-logo--nav {
  height: 32px;
  margin: 0;
}

/* Spinner de carregamento canonico - todo estado de "carregando" em
   qualquer pagina /hq/** deve usar .av-loading + .av-spinner em vez de
   inventar um indicador ad-hoc. Esconder o conteudo real (via [hidden])
   enquanto .av-loading estiver visivel. */
.av-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--av-text-muted);
  font-size: 14px;
  padding: 24px 0;
}
.av-loading[hidden] {
  display: none;
}
/* Variante centralizada (2026-07-08) - para o loading principal de uma
   pagina inteira (icone em cima, texto embaixo, centralizado na area de
   conteudo), em vez da linha compacta no canto superior esquerdo. Usar em
   `#loading` de paginas com uma unica area de conteudo principal; manter a
   `.av-loading` simples (linha compacta) para loaders pequenos dentro de
   card/secao ou dentro de botao (ex: login). */
.av-loading--center {
  flex-direction: column;
  justify-content: center;
  min-height: 50vh;
  gap: 14px;
  font-size: 15px;
}
.av-loading--center .av-spinner {
  width: 56px;
  height: 56px;
}
/* Spinner canonico v3 (2026-07-08): usa o icone REAL aprovado
   (favicon-andreia-viana.png, mesmo arquivo do resto do HQ - ver
   00_DADOS_E_STATUS/ATUALIZACAO_LOGO_OFICIAL_CANONICO_20260704.md) como
   mascara, em vez de uma silhueta redesenhada a mao (v2, descartada por nao
   bater exatamente com o logo aprovado). O gradiente da marca varre por
   dentro do proprio recorte do icone real - fidelidade de forma garantida
   porque a forma E o PNG oficial, so a cor que se move (efeito neon). */
.av-spinner {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: linear-gradient(120deg, var(--av-lilas), var(--av-roxo), var(--av-rosa), var(--av-lilas));
  background-size: 300% 300%;
  -webkit-mask: url('/01_ENTREGAS_HTML/assets/images/favicon-andreia-viana.png') no-repeat center / contain;
  mask: url('/01_ENTREGAS_HTML/assets/images/favicon-andreia-viana.png') no-repeat center / contain;
  filter: drop-shadow(0 0 3px rgba(143, 60, 195, 0.55));
  animation: av-spinner-shimmer 1.8s linear infinite;
}
@keyframes av-spinner-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .av-spinner { animation: none; background-position: 50% 50%; }
}

/* Avatar + menu de usuario no header (2026-07-08) - substitui o par
   email+botao "Sair" solto no canto por um avatar com iniciais e um
   dropdown, igual ao padrao de qualquer painel real. */
.av-user-menu {
  position: relative;
  display: inline-block;
}
.av-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--av-gradient);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  background: var(--av-bg-card);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  box-shadow: 0 8px 28px rgba(42, 32, 51, 0.14);
  padding: 12px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Especificidade [hidden] (0,2,0) > .av-user-dropdown sozinho (0,1,0) - sem isso,
   o "display:flex" acima sempre vencia o "[hidden]{display:none}" padrao do
   navegador (folha de estilo do autor sempre vence a do user-agent, mesmo com
   especificidade igual), entao o dropdown ficava visivelmente aberto o tempo
   todo, independente do atributo hidden setado via JS. Bug real relatado via
   review widget ("abre sozinho, sem eu clicar", 2026-07-08).
   O toggle de abrir/fechar em supabase-client.js so mexe no atributo hidden -
   sem esta regra, ele nunca tinha efeito visual nenhum. */
.av-user-dropdown[hidden] {
  display: none;
}
.av-user-dropdown-email {
  font-size: 12px;
  color: var(--av-text-muted);
  word-break: break-all;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--av-border);
}
.av-user-dropdown-logout {
  background: none;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  padding: 8px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--av-text);
  cursor: pointer;
  text-align: left;
}
.av-user-dropdown-logout:hover {
  background: var(--av-bg);
  color: var(--av-rosa);
}

/* ─── RESPONSIVO / MOBILE (2026-07-16) ───────────────────────────────────────
   Auditoria ao vivo em 390px (iPhone) encontrou 9 de 17 rotas do HQ estourando
   a largura da tela (ate 980px de scrollWidth num viewport de 390) e 4 rotas
   escondendo dados. Ate esta data brand.css nao tinha NENHUMA media query nem
   NENHUMA regra de tabela - so sidebar.css era responsivo. Causa raiz das duas
   familias de defeito:

   1. Tabela sem container rolavel: a tabela (ate 1192px) empurra a pagina
      inteira, o navegador do telemovel desiste do "width=device-width" e faz
      zoom-out da pagina toda para caber. O texto fica minusculo e a pagina
      parece "travada"/errada.
   2. Tabela dentro de card com `overflow:hidden`: nao estoura a pagina, mas
      CORTA as colunas da direita e o utilizador nao tem como as alcancar
      (confirmado ao vivo: /hq/pessoas escondia 897px de tabela, a coluna
      "Tags" era inalcancavel por toque).

   A correcao canonica e a mesma para os dois casos: um container que rola na
   horizontal. `overflow-x:auto` mantem o arredondamento do card (era esse o
   motivo do `overflow:hidden` original) e passa a permitir o gesto de arrastar.
   ------------------------------------------------------------------------- */

/* Container canonico de tabela larga. Usar SEMPRE que uma tabela puder ficar
   mais larga que a tela - envolver a <table> nele em vez de a deixar solta. */
.av-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Strings longas sem espaco (URL, id, nome de tabela dentro de <code>) nao
   podem empurrar a pagina - confirmado ao vivo em /hq/redes-sociais-respostas
   (um <code> de 493px) e /hq/crescimento-campanhas (463px). */
code,
.note code,
p code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 768px) {
  /* Nenhum bloco pode ultrapassar a largura da tela. */
  img,
  pre,
  table {
    max-width: 100%;
  }
  /* Rede de seguranca SO no telemovel: tabela larga que ficou solta dentro de
     um card/painel (sem .av-table-scroll) passa a rolar em vez de esticar a
     pagina. Fica restrito a media query de proposito - aplicar `display:block`
     numa tabela no desktop faz a tabela encolher para o conteudo em vez de
     ocupar 100% do card, ou seja, seria uma regressao visual no desktop. */
  .av-card > table,
  .panel > table,
  #campanhas-content > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Respiro lateral menor no telemovel - o padding de desktop sozinho ja
     consome ~15% de um ecra de 390px. */
  .av-card,
  .panel {
    padding: 16px;
  }
  .av-card[style*="padding:0"],
  .panel[style*="padding:0"] {
    padding: 0;
  }
}