/* =========================================================
   Sistema EJC Jaguaribe - base.css
   Reset, variaveis e tipografia. Escrito mobile-first
   (documentacao-sistema-ejc.md, secao 9).
   ========================================================= */

/* Fonte geometrica (Poppins) para casar com a identidade visual dos 50 anos
   do EJC Brasil - titulos com bastante letter-spacing, igual ao material. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta extraida do material dos 50 anos do EJC Brasil: turquesa vivo,
     ameixa escura e fundo creme. Cores semanticas (sucesso/alerta/erro)
     ficam fora do rebranding de propósito - carregam significado de UX
     (verde=ok, vermelho=erro) que não deve mudar junto com a marca. */
  --cor-primaria: #0b7480;
  --cor-primaria-clara: #159aa6;
  --cor-fundo: #f7efe2;
  --cor-superficie: #ffffff;
  --cor-borda: #e7dcc9;
  --cor-texto: #2a1522;
  --cor-texto-secundario: #7c6270;
  --cor-sucesso: #1e7d3c;
  --cor-sucesso-fundo: #e4f6ea;
  --cor-alerta: #a15c00;
  --cor-alerta-fundo: #fff2df;
  --cor-erro: #b3261e;
  --cor-erro-fundo: #fdecea;

  --raio: 10px;
  --espaco-toque: 44px;
  --fonte-base: 16px; /* nunca menor, senao o iPhone da zoom ao focar campo */
}

* {
  box-sizing: border-box;
}

/* Garante que o atributo/propriedade "hidden" sempre esconda o elemento,
   mesmo quando ele tem uma classe (.campo, .botao, .barra-rodape etc.) que
   define "display: flex/grid" — sem isso, a regra de display da classe
   (origem "author") vence a regra nativa [hidden] { display: none }
   (origem "user-agent") em caso de empate de especificidade, e o elemento
   continua visível mesmo com hidden=true. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Emojis (👥 ⏸️ 📈 etc.) aparecem em quase toda tela do sistema (botoes,
     indicadores, titulos) - sem uma fonte de emoji explicita no final da
     pilha, o navegador pode nao cair para uma fonte colorida ao procurar
     o glifo na Poppins/Segoe UI e mostrar uma caixa quebrada em vez do
     icone. */
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size: var(--fonte-base);
  line-height: 1.45;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  max-width: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

p {
  margin: 0 0 12px;
}

a {
  color: var(--cor-primaria);
}

img {
  max-width: 100%;
  display: block;
}

/* Nenhum elemento pode causar rolagem horizontal */
img, table, pre, textarea {
  max-width: 100%;
}

.container {
  width: 100%;
  padding: 16px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

.container--largo {
  max-width: 100%;
}

@media (min-width: 1024px) {
  .container--largo {
    max-width: 1280px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 15px;
  }

  .container {
    max-width: 1200px;
    padding: 24px;
  }

  .container--largo {
    max-width: 1360px;
  }

  .container--ficha {
    max-width: 820px;
  }
}

/* Texto de corpo nunca abaixo de 14px; secundario um pouco menor mas legivel */
.texto-secundario {
  color: var(--cor-texto-secundario);
  font-size: 14px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}