/* ==========================================================================
   MQH — Mesa Quântica Horizonte de Eventos
   Folha de marca única. Toda página do ecossistema importa ESTE arquivo.

   Regra de ouro: nenhuma página deve escrever um código de cor na mão.
   Se você precisa de uma cor que não está aqui, ela não é da marca —
   ou está faltando, e o lugar de acrescentar é aqui, não na página.

   Uso:  <link rel="stylesheet" href="/css/mqh-marca.css">
   ========================================================================== */

/* --------------------------------------------------------------- tipografia */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

:root {

  /* === CORES OFICIAIS (definidas por Cristiani Freitas) ================== */
  --mqh-noite:        #0A0E2A;   /* Night Sky      — fundo institucional     */
  --mqh-ouro:         #C9A84C;   /* Celestial Gold — SÓ sobre fundo escuro   */
  --mqh-luz:          #FFFFFF;   /* Pure Light                              */
  --mqh-violeta:      #2D1B4E;   /* Quantic Violet — acento, nunca fundo base*/
  --mqh-prata:        #A9A9A9;   /* Silver Ether   — texto secundário escuro */

  /* === DERIVADAS TÉCNICAS ===============================================
     Não são cores novas: são a mesma marca ajustada para passar em
     contraste e para dar profundidade. Sem elas a paleta oficial não
     funciona em fundo claro nem em texto pequeno.                         */
  --mqh-ouro-claro:   #E4C87A;   /* brilho, realce sobre noite              */
  --mqh-ouro-escuro:  #8A6D2F;   /* ouro para TEXTO sobre fundo claro       */
  --mqh-noite-2:      #131A3D;   /* superfície elevada sobre a noite        */
  --mqh-noite-3:      #1E2650;   /* borda / divisor no escuro               */
  --mqh-pergaminho:   #FAF8F4;   /* fundo claro dos relatórios              */
  --mqh-pergaminho-2: #F1ECE1;   /* faixa clara alternada                   */
  --mqh-tinta:        #23283C;   /* texto corrido sobre fundo claro         */
  --mqh-tinta-fraca:  #5C6178;   /* texto secundário sobre fundo claro      */
  --mqh-linha:        #DED6C4;   /* divisor sobre fundo claro               */

  /* === SEMÂNTICAS (estado) ============================================== */
  --mqh-ok:           #2F5C33;
  --mqh-ok-fundo:     #EEF5EE;
  --mqh-atencao:      #8A6A22;
  --mqh-atencao-fundo:#FBF3DF;
  --mqh-erro:         #8A2F22;
  --mqh-erro-fundo:   #FDF1EF;

  /* === TIPOGRAFIA ======================================================= */
  --mqh-fonte-marca:  'Cinzel', 'Trajan Pro', Georgia, serif;              /* só logo e títulos de capa */
  --mqh-fonte-titulo: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; /* títulos e destaques       */
  --mqh-fonte-texto:  'Lato', 'Segoe UI', system-ui, sans-serif;           /* corpo, formulários, UI    */
  --mqh-fonte-mono:   ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* escala tipográfica — razão 1.25 */
  --mqh-t-xs:   .78rem;
  --mqh-t-sm:   .89rem;
  --mqh-t-base: 1rem;
  --mqh-t-md:   1.25rem;
  --mqh-t-lg:   1.56rem;
  --mqh-t-xl:   1.95rem;
  --mqh-t-2xl:  2.44rem;
  --mqh-t-3xl:  3.05rem;

  /* === RITMO E FORMA ==================================================== */
  --mqh-e-1: .25rem;  --mqh-e-2: .5rem;   --mqh-e-3: .75rem;
  --mqh-e-4: 1rem;    --mqh-e-5: 1.5rem;  --mqh-e-6: 2rem;
  --mqh-e-7: 3rem;    --mqh-e-8: 4rem;

  --mqh-raio:      6px;
  --mqh-raio-g:    12px;
  --mqh-sombra:    0 2px 12px rgba(10,14,42,.10);
  --mqh-sombra-g:  0 8px 32px rgba(10,14,42,.18);
  --mqh-largura:   72rem;   /* largura máxima de leitura confortável */
  --mqh-largura-texto: 38rem;
}

/* ==========================================================================
   BASE — ESCOPADA DE PROPOSITO

   Estas regras tocam elementos nus (body, h1, p, a). Numa pagina legada isso
   vazaria: um h2 sem cor explicita sobre fundo escuro herdaria o azul-noite
   e sumiria. Por isso ficam TODAS sob .mqh-base.

   Pagina nova  -> <body class="mqh-base">, herda tudo pronto.
   Pagina antiga -> nao poe a classe, e consome so os tokens e as classes
                    .mqh-* que ela escolher. Zero risco de regressao.
   ========================================================================== */
.mqh-base *, .mqh-base *::before, .mqh-base *::after { box-sizing: border-box; }

body.mqh-base {
  margin: 0;
  font-family: var(--mqh-fonte-texto);
  font-size: var(--mqh-t-base);
  line-height: 1.65;
  color: var(--mqh-tinta);
  background: var(--mqh-pergaminho);
  -webkit-font-smoothing: antialiased;
}

.mqh-base h1, .mqh-base h2, .mqh-base h3, .mqh-base h4 {
  font-family: var(--mqh-fonte-titulo);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--mqh-e-3);
  color: var(--mqh-noite);
}
.mqh-base h1 { font-size: var(--mqh-t-2xl); }
.mqh-base h2 { font-size: var(--mqh-t-xl); }
.mqh-base h3 { font-size: var(--mqh-t-lg); }
.mqh-base h4 { font-size: var(--mqh-t-md); }

.mqh-base p { margin: 0 0 var(--mqh-e-4); max-width: var(--mqh-largura-texto); }

.mqh-base a { color: var(--mqh-ouro-escuro); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mqh-base a:hover { color: var(--mqh-noite); }

/* Superficie institucional — capas, login, portal, cabecalhos */
.mqh-noite {
  background: var(--mqh-noite);
  color: var(--mqh-luz);
}
.mqh-noite h1, .mqh-noite h2, .mqh-noite h3 { color: var(--mqh-ouro); }
.mqh-noite a { color: var(--mqh-ouro-claro); }

/* Ceu profundo com o brilho do horizonte — capas e telas de entrada */
.mqh-ceu {
  background:
    radial-gradient(ellipse 120% 80% at 50% 118%,
      rgba(201,168,76,.20) 0%, rgba(201,168,76,.05) 45%, transparent 70%),
    var(--mqh-noite);
  color: var(--mqh-luz);
}

/* Foco visivel — acessibilidade. Este SIM vale global: tirar foco de uma
   pagina legada seria pior do que o risco de estilo. */
:focus-visible {
  outline: 2px solid var(--mqh-ouro-escuro);
  outline-offset: 2px;
  border-radius: 2px;
}
.mqh-noite :focus-visible, .mqh-ceu :focus-visible { outline-color: var(--mqh-ouro-claro); }

/* ==========================================================================
   LOGO
   ========================================================================== */
.mqh-logo { display: block; height: auto; }
.mqh-logo--topo    { width: 190px; }
.mqh-logo--capa    { width: 320px; margin-inline: auto; }
.mqh-logo--simbolo { width: 56px; }

/* Área de respiro obrigatória: metade da altura do símbolo em toda a volta.
   Nada — texto, borda, foto — entra nessa faixa. */
.mqh-logo-area { padding: .5em; display: inline-block; }

/* ==========================================================================
   ESTRUTURA
   ========================================================================== */
.mqh-container { width: 100%; max-width: var(--mqh-largura); margin-inline: auto; padding-inline: var(--mqh-e-5); }
.mqh-secao     { padding-block: var(--mqh-e-7); }

.mqh-cabecalho {
  background: var(--mqh-noite);
  border-bottom: 2px solid var(--mqh-ouro);
  padding: var(--mqh-e-4) 0;
}
.mqh-rodape {
  background: var(--mqh-noite);
  color: var(--mqh-prata);
  font-size: var(--mqh-t-sm);
  padding: var(--mqh-e-6) 0;
  border-top: 1px solid var(--mqh-noite-3);
}
.mqh-rodape a { color: var(--mqh-ouro-claro); }

/* Filete dourado — divisor institucional da marca */
.mqh-filete {
  border: 0; height: 1px; margin: var(--mqh-e-6) 0;
  background: linear-gradient(90deg, transparent, var(--mqh-ouro) 22%, var(--mqh-ouro) 78%, transparent);
  opacity: .55;
}

/* ==========================================================================
   CARTÃO
   ========================================================================== */
.mqh-cartao {
  background: var(--mqh-luz);
  border: 1px solid var(--mqh-linha);
  border-radius: var(--mqh-raio-g);
  padding: var(--mqh-e-5);
  box-shadow: var(--mqh-sombra);
}
.mqh-noite .mqh-cartao, .mqh-ceu .mqh-cartao {
  background: var(--mqh-noite-2);
  border-color: var(--mqh-noite-3);
  color: var(--mqh-luz);
  box-shadow: none;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.mqh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mqh-e-2);
  font-family: var(--mqh-fonte-texto); font-size: var(--mqh-t-base); font-weight: 700;
  line-height: 1; padding: .8em 1.6em; border-radius: var(--mqh-raio);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.mqh-btn:disabled, .mqh-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Primário: ouro sólido com texto noite. O único par ouro-e-texto que passa
   em contraste com folga (8,3:1) — por isso o texto é escuro, não branco. */
.mqh-btn--primario { background: var(--mqh-ouro); color: var(--mqh-noite); }
.mqh-btn--primario:hover { background: var(--mqh-ouro-claro); color: var(--mqh-noite); }

.mqh-btn--secundario { background: transparent; color: var(--mqh-ouro-escuro); border-color: var(--mqh-ouro-escuro); }
.mqh-btn--secundario:hover { background: var(--mqh-ouro-escuro); color: var(--mqh-luz); }

.mqh-noite .mqh-btn--secundario, .mqh-ceu .mqh-btn--secundario { color: var(--mqh-ouro); border-color: var(--mqh-ouro); }
.mqh-noite .mqh-btn--secundario:hover, .mqh-ceu .mqh-btn--secundario:hover { background: var(--mqh-ouro); color: var(--mqh-noite); }

.mqh-btn--discreto { background: transparent; color: var(--mqh-tinta-fraca); }
.mqh-btn--discreto:hover { color: var(--mqh-noite); background: var(--mqh-pergaminho-2); }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */
.mqh-campo { display: block; margin-bottom: var(--mqh-e-4); }
.mqh-rotulo {
  display: block; margin-bottom: var(--mqh-e-1);
  font-size: var(--mqh-t-sm); font-weight: 700; color: var(--mqh-tinta);
}
.mqh-noite .mqh-rotulo, .mqh-ceu .mqh-rotulo { color: var(--mqh-luz); }

.mqh-input, .mqh-select, .mqh-textarea {
  width: 100%; font-family: var(--mqh-fonte-texto); font-size: var(--mqh-t-base);
  padding: .7em .9em; color: var(--mqh-tinta);
  background: var(--mqh-luz);
  border: 1px solid var(--mqh-linha); border-radius: var(--mqh-raio);
}
.mqh-input:focus, .mqh-select:focus, .mqh-textarea:focus {
  border-color: var(--mqh-ouro-escuro);
  outline: 2px solid var(--mqh-ouro-escuro); outline-offset: 0;
}
.mqh-noite .mqh-input, .mqh-ceu .mqh-input,
.mqh-noite .mqh-select, .mqh-ceu .mqh-select,
.mqh-noite .mqh-textarea, .mqh-ceu .mqh-textarea {
  background: var(--mqh-noite-2); color: var(--mqh-luz); border-color: var(--mqh-noite-3);
}
.mqh-ajuda { font-size: var(--mqh-t-xs); color: var(--mqh-tinta-fraca); margin-top: var(--mqh-e-1); }

/* ==========================================================================
   AVISOS
   ========================================================================== */
.mqh-aviso {
  padding: var(--mqh-e-3) var(--mqh-e-4); border-radius: var(--mqh-raio);
  border-left: 3px solid; margin-bottom: var(--mqh-e-4); font-size: var(--mqh-t-sm);
}
.mqh-aviso--ok      { background: var(--mqh-ok-fundo);      border-color: var(--mqh-ok);      color: var(--mqh-ok); }
.mqh-aviso--atencao { background: var(--mqh-atencao-fundo); border-color: var(--mqh-atencao); color: var(--mqh-atencao); }
.mqh-aviso--erro    { background: var(--mqh-erro-fundo);    border-color: var(--mqh-erro);    color: var(--mqh-erro); }

/* ==========================================================================
   TABELA
   ========================================================================== */
.mqh-tabela { width: 100%; border-collapse: collapse; font-size: var(--mqh-t-sm); }
.mqh-tabela th {
  text-align: left; font-family: var(--mqh-fonte-texto); font-weight: 700;
  background: var(--mqh-noite); color: var(--mqh-ouro);
  padding: var(--mqh-e-3) var(--mqh-e-4);
}
.mqh-tabela td { padding: var(--mqh-e-3) var(--mqh-e-4); border-bottom: 1px solid var(--mqh-linha); }
.mqh-tabela tbody tr:nth-child(even) { background: var(--mqh-pergaminho-2); }
.mqh-rolagem { overflow-x: auto; }   /* tabela larga rola sozinha, a página não */

/* ==========================================================================
   RELATÓRIO DO CLIENTE — a peça que sai da mesa e vai para a mão da pessoa
   ========================================================================== */
.mqh-relatorio { background: var(--mqh-pergaminho); color: var(--mqh-tinta); }
.mqh-relatorio__capa {
  background: var(--mqh-noite); color: var(--mqh-luz);
  text-align: center; padding: var(--mqh-e-8) var(--mqh-e-5);
}
.mqh-relatorio__capa h1 {
  font-family: var(--mqh-fonte-marca); color: var(--mqh-ouro);
  font-size: var(--mqh-t-2xl); letter-spacing: .06em; margin-top: var(--mqh-e-5);
}
.mqh-relatorio__meta { color: var(--mqh-prata); font-size: var(--mqh-t-sm); letter-spacing: .04em; }
.mqh-relatorio h2 {
  font-family: var(--mqh-fonte-titulo); color: var(--mqh-noite);
  border-bottom: 1px solid var(--mqh-ouro); padding-bottom: var(--mqh-e-2);
  margin-top: var(--mqh-e-7);
}
/* Fala do campo / testemunho — voz do Oráculo dentro do relatório */
.mqh-testemunho {
  font-family: var(--mqh-fonte-titulo); font-size: var(--mqh-t-md); font-style: italic;
  color: var(--mqh-noite); background: var(--mqh-pergaminho-2);
  border-left: 3px solid var(--mqh-ouro); padding: var(--mqh-e-4) var(--mqh-e-5);
  margin: var(--mqh-e-5) 0; border-radius: 0 var(--mqh-raio) var(--mqh-raio) 0;
}

/* ==========================================================================
   IMPRESSÃO / PDF
   ========================================================================== */
@media print {
  body { background: #fff; font-size: 11pt; }
  .mqh-nao-imprime { display: none !important; }
  .mqh-relatorio__capa { break-after: page; }
  .mqh-relatorio h2 { break-after: avoid; }
  .mqh-testemunho, .mqh-cartao, .mqh-tabela tr { break-inside: avoid; }
  a { color: var(--mqh-tinta); text-decoration: none; }
}

/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.mqh-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}