/* =============================================================================
   ESUS Painel — complemento ao Bootstrap 5.3
   =============================================================================
   O Bootstrap resolve grade, componentes e responsividade. Este arquivo cuida do
   que e proprio da marca e do acabamento visual.

   O tema escuro vem do Bootstrap (data-bs-theme); aqui so redefinimos as
   variaveis que ele nao conhece.

   QUEM LE ESTA PAGINA. Secretario de saude e pessoal de TI de prefeitura, quase
   sempre no computador da secretaria, as vezes no celular. Nao e publico de
   startup: a pagina precisa parecer confiavel antes de parecer moderna. Por isso
   nada de animacao chamativa, gradiente exagerado ou fonte decorativa - o que
   melhora aqui e hierarquia, espaco e contraste.
   ============================================================================= */

:root {
  --marca: #ff6600;
  --marca-forte: #e05500;
  --marca-escura: #b84600;
  --marca-suave: #fff5ee;
  --marca-borda: rgba(255, 102, 0, .28);
  --marca-brilho: rgba(255, 102, 0, .16);

  /* Superficie das secoes alternadas. Separar por COR e nao por borda deixa a
     pagina menos riscada e a leitura mais calma. */
  --faixa: #fbfaf9;

  --sombra-cartao: 0 1px 2px rgba(16, 24, 40, .04),
                   0 4px 12px rgba(16, 24, 40, .06);
  --sombra-alta:   0 2px 4px rgba(16, 24, 40, .05),
                   0 12px 32px rgba(16, 24, 40, .10);

  --raio: 14px;
}

[data-bs-theme="dark"] {
  --marca-suave: #2a1a10;
  --marca-borda: rgba(255, 122, 40, .32);
  --marca-brilho: rgba(255, 122, 40, .18);
  --faixa: #16191d;

  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
  --sombra-alta:   0 2px 4px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .4);
}

/* Laranja puro sobre fundo escuro fica vibrante demais e cansa; clareia um
   pouco para manter o contraste sem gritar. */
[data-bs-theme="dark"] {
  --marca: #ff7a28;
  --marca-forte: #ff8c42;
}

body {
  /* -apple-system primeiro faz a pagina usar a fonte do proprio sistema, entao
     ela parece nativa em cada aparelho em vez de "site". */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titulos mais justos que o padrao do Bootstrap: em tamanho grande o
   espacamento normal faz a linha parecer solta. */
h1, h2, h3, .titulo-principal {
  letter-spacing: -.021em;
}

.secao { padding: 3.5rem 0; }
.faixa { background: var(--faixa); }

@media (max-width: 767.98px) {
  .secao { padding: 2.5rem 0; }
}

/* ---------------------------------------------------------------- marca */

.texto-marca { color: var(--marca) !important; }
.fundo-marca { background-color: var(--marca) !important; }
.borda-marca { border-color: var(--marca) !important; }

.btn-marca {
  --bs-btn-bg: var(--marca);
  --bs-btn-border-color: var(--marca);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--marca-forte);
  --bs-btn-hover-border-color: var(--marca-forte);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--marca-escura);
  --bs-btn-active-border-color: var(--marca-escura);
  --bs-btn-focus-shadow-rgb: 255, 102, 0;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(184, 70, 0, .25);
}

.selo-marca {
  background: var(--marca-suave);
  color: var(--marca-escura);
  border: 1px solid var(--marca-borda);
  font-weight: 600;
}

[data-bs-theme="dark"] .selo-marca { color: var(--marca); }

/* Etiqueta de secao: diz do que a secao trata antes do titulo, e deixa a
   pagina navegavel de relance por quem so rola. */
.etiqueta-secao {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marca);
  margin-bottom: .75rem;
}

/* ----------------------------------------------------------------- topo */

.topo {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3rem;
}

/* Brilho decorativo atras do titulo. `overflow: hidden` no pai impede que ele
   crie rolagem horizontal. */
.topo::before {
  content: "";
  position: absolute;
  top: -380px;
  left: 50%;
  width: min(900px, 150vw);
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--marca-brilho), transparent 72%);
  pointer-events: none;
}

.topo > * { position: relative; }

.titulo-principal {
  font-weight: 800;
  line-height: 1.1;
}

@media (max-width: 575.98px) {
  .topo { padding: 2.5rem 0 2rem; }
}

/* ----------------------------------------------------------- cartao app */

.cartao-app {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cartao-app:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: var(--marca-borda);
}

/* O programa obrigatorio precisa se distinguir a distancia: quem instala numa
   unidade nova nao sabe que os outros dependem dele. */
.cartao-app.destacado {
  border-color: var(--marca);
  box-shadow: 0 0 0 1px var(--marca), var(--sombra-alta);
}

.icone-app {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 27px;
  background: var(--marca-suave);
  border: 1px solid var(--marca-borda);
  border-radius: 15px;
  flex-shrink: 0;
}

/* --------------------------------------------------------- botao baixar */

.baixar {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--bs-border-color);
  border-radius: 12px;
  text-decoration: none;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  transition: border-color .15s, background-color .15s, transform .15s;
}

.baixar:hover {
  border-color: var(--marca);
  background: var(--marca-suave);
  color: var(--bs-body-color);
  transform: translateX(2px);
}

/* Foco visivel: a pagina precisa ser navegavel por teclado, e o controle remoto
   de TV box tambem chega aqui como teclado. */
.baixar:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

.baixar.recomendado {
  border-color: var(--marca);
  background: var(--marca-suave);
  box-shadow: 0 0 0 3px var(--marca-brilho);
}

.baixar .emoji { font-size: 1.4rem; line-height: 1; }
.baixar .seta { color: var(--bs-secondary-color); transition: color .15s; }
.baixar:hover .seta,
.baixar.recomendado .seta { color: var(--marca); }

/* ------------------------------------------------------------- vantagem */

.cartao-vantagem {
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--raio);
  background: var(--bs-body-bg);
  transition: border-color .2s, box-shadow .2s;
}

.cartao-vantagem:hover {
  border-color: var(--marca-borda);
  box-shadow: var(--sombra-cartao);
}

.icone-vantagem {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: var(--marca-suave);
  border: 1px solid var(--marca-borda);
  border-radius: 14px;
}

/* --------------------------------------------------------------- passos */

.numero-passo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--marca);
  color: #fff;
  border-radius: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px var(--marca-brilho);
}

/* -------------------------------------------------------------- acordeao */

.accordion-button:not(.collapsed) {
  background: var(--marca-suave);
  color: var(--marca-escura);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  color: var(--marca);
}

.accordion-button:focus {
  border-color: var(--marca-borda);
  box-shadow: 0 0 0 .2rem var(--marca-brilho);
}

/* A classe `.hash` foi removida junto com a exibicao do SHA-256 nas paginas.
   Regra sem uso e pior que regra faltando: quem le procura onde ela se aplica e
   nao acha. O hash continua no GET /versoes, que nao usa CSS. */

/* ------------------------------------------------------------------ topo */

.navbar {
  backdrop-filter: saturate(180%) blur(12px);
  background-color: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
  transition: box-shadow .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}

/* PARADA NO TOPO NAO PRECISA DE SEPARACAO; sobreposta ao conteudo, precisa.
   A borda fixa que havia antes riscava a pagina sem motivo no primeiro quadro,
   quando ainda nao ha nada passando por baixo. */
.navbar.rolou {
  border-bottom-color: var(--bs-border-color);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

[data-bs-theme="dark"] .navbar.rolou {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.icone-menu {
  flex: none;
  opacity: .7;
}

.nav-link.active .icone-menu,
.nav-link:hover .icone-menu {
  opacity: 1;
}

/* --------------------------------------------- menu no computador (lg+) */

@media (min-width: 992px) {
  .navbar-nav .nav-link {
    position: relative;
    padding: .4rem .2rem;
    margin: 0 .55rem;
    color: var(--bs-body-color);
    opacity: .78;
    transition: opacity .15s ease, color .15s ease;
  }

  .navbar-nav .nav-link:hover { opacity: 1; }

  .navbar-nav .nav-link.active {
    opacity: 1;
    color: var(--marca);
    font-weight: 600;
  }

  /* A MARCA DA PAGINA ATUAL. Negrito sozinho nao basta numa barra de cinco
     itens: peso de fonte se confunde com estilo, e a pessoa perde a nocao de
     onde esta. Uma barra colorida embaixo e o unico sinal que se le sem
     comparar com os vizinhos. */
  .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--marca);
  }

  .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* A descricao so existe no celular; aqui ela vira dica do mouse (title=). */
  .item-desc { display: none; }
}

/* -------------------------------------------------- menu no celular (<lg) */

@media (max-width: 991.98px) {
  /* ALVOS GRANDES E LINHA INTEIRA. O menu antigo eram cinco textos colados,
     com area de toque da altura da letra - em celular isso e o que faz a
     pessoa abrir a pagina errada e ter de voltar. */
  .navbar-collapse {
    padding-top: .5rem;
    padding-bottom: .35rem;
  }

  .navbar-nav .nav-link {
    align-items: flex-start !important;
    padding: .7rem .8rem;
    border-radius: 10px;
    margin-bottom: .15rem;
  }

  .navbar-nav .nav-link .icone-menu {
    margin-top: .15rem;
  }

  .item-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  /* A frase que diz o que a pagina responde. "Versoes" e "Compatibilidade"
     sozinhos parecem a mesma coisa, e quem procura uma das duas abria as duas. */
  .item-desc {
    font-size: .78rem;
    opacity: .65;
    margin-top: .12rem;
  }

  /* Preenchido, e nao so colorido: no celular a pagina atual e a unica
     referencia de onde se esta, porque nao ha barra de titulo repetindo. */
  .navbar-nav .nav-link.active {
    background: var(--marca-suave);
    color: var(--marca) !important;
    font-weight: 600;
  }

  .navbar-nav .nav-link.active .item-desc { opacity: .8; }
}

/* -------------------------------------------------------- seletor de tema */

.seletor-tema {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  margin-right: .25rem;
}

.btn-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bs-body-color);
  opacity: .55;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

.btn-tema:hover { opacity: .9; }

.btn-tema.active {
  background: var(--marca-brilho);
  color: var(--marca);
  opacity: 1;
}

.btn-tema:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* Antes do JS marcar qual esta ativo, os tres saem apagados por um instante.
   Sem isto o grupo pisca vazio no carregamento, como se estivesse quebrado. */
html:not([data-tema-escolha]) .btn-tema:last-child { opacity: 1; }

/* Respeita quem desativou animacao no sistema - vertigem e enjoo sao reais. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .cartao-app:hover,
  .baixar:hover { transform: none; }
}

/* --------------------------------------------------------- faixa do plano */

/* Fica no topo do cartao e some (invisible) nos planos sem destaque.
   Ocupar o espaco mesmo invisivel e o que mantem os nomes dos planos alinhados
   na mesma altura - sem isso, so o cartao em destaque desceria. */
.faixa-plano {
  padding: .6rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: .9rem;
  border-radius: calc(var(--raio) - 1px) calc(var(--raio) - 1px) 0 0;
}


/* =============================================================================
   Aproveitamento do espaco
   =============================================================================
   O layout anterior era uma coluna centrada em tudo. Num monitor de secretaria,
   1440 px de largura, isso deixava 500 px vazios de cada lado enquanto o
   conteudo rolava - a pessoa rolava mais para ver menos.

   Estas regras usam a largura quando ela existe, sem quebrar no celular.
   ============================================================================= */

/* Container um pouco mais largo que o padrao do Bootstrap (1320px). Em telas
   grandes sobra espaco de verdade; em telas menores nada muda, porque `width`
   continua limitando. */
@media (min-width: 1400px) {
  .container { max-width: 1400px; }
}

/* --------------------------------------------------- topo em duas colunas */

/* Titulo a esquerda, atalho de download a direita. O topo deixa de ser uma
   faixa alta so com texto e passa a entregar a acao principal sem rolagem. */
.topo-duplo {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 992px) {
  .topo-duplo {
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem;
  }
}

/* Painel de atalho: os tres programas em lista compacta, ja no topo. */
.atalho-download {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--raio);
  background: var(--bs-body-bg);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

.atalho-download .linha {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--bs-border-color);
  text-decoration: none;
  color: var(--bs-body-color);
  transition: background-color .15s;
}

.atalho-download .linha:first-of-type { border-top: 0; }
.atalho-download .linha:hover { background: var(--marca-suave); }

/* --------------------------------------- historico com navegacao lateral */

.pagina-lateral {
  display: grid;
  gap: 2rem;
}

@media (min-width: 992px) {
  .pagina-lateral {
    /* Coluna fixa para a navegacao e o resto para o conteudo: a lista de apps
       nao precisa crescer, e o historico sim. */
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 3rem;
  }
}

/* A navegacao acompanha a rolagem: com dezenas de versoes, ter de voltar ao
   topo para trocar de programa e o que faz a pagina parecer longa. */
.navegacao-lateral {
  position: sticky;
  top: 5.5rem;
  align-self: start;
}

.navegacao-lateral a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--bs-body-color);
  font-size: .95rem;
  transition: background-color .15s;
}

.navegacao-lateral a:hover { background: var(--marca-suave); }

/* ------------------------------------------------ versoes lado a lado */

/* As versoes antigas viram cartoes menores em grade: uma lista vertical de
   cartoes largos gastava a tela inteira para mostrar tres lancamentos. */
.grade-versoes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* A versao ATUAL ocupa a linha inteira: e a que quase todo mundo veio ver, e
   espremer ela junto das antigas apagaria essa diferenca. */
.grade-versoes .atual { grid-column: 1 / -1; }


/* =============================================================================
   Celular
   =============================================================================
   Quem abre este site no telefone quase sempre esta EM PE numa unidade, com o
   aparelho na mao, procurando o botao de baixar. Nao esta lendo - esta
   caçando uma coisa so. As regras abaixo tiram do caminho o que, na largura de
   um telefone, so empurra esse botao para baixo.
   ============================================================================= */

@media (max-width: 991.98px) {
  /* A NAVEGACAO DE PROGRAMAS VIRA UMA FITA HORIZONTAL.

     Em duas colunas ela e uma barra lateral que acompanha a rolagem. Empilhada
     no telefone, virava o oposto do que foi feita para ser: um bloco alto -
     titulo, quatro links, divisoria e um paragrafo - que precisava ser rolado
     inteiro ANTES de chegar na primeira versao. Atalho que exige rolagem nao e
     atalho.

     Como fita, os quatro programas cabem numa linha so e o resto do dedo
     continua servindo para rolar a pagina. */
  .navegacao-lateral { position: static; }

  .navegacao-lateral .etiqueta-secao { display: none; }

  .navegacao-lateral .lista-apps {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .35rem;
    /* Sangra ate as bordas: a fita cortada no meio da tela avisa que ha mais
       para o lado melhor do que uma que termina certinha na margem. */
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    scrollbar-width: none;
  }

  .navegacao-lateral .lista-apps::-webkit-scrollbar { display: none; }

  .navegacao-lateral .lista-apps a {
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    /* Alvo de toque: .6rem dava pouco mais de 30 px de altura, abaixo do que se
       acerta com o polegar sem mirar. */
    padding: .65rem .9rem;
    white-space: nowrap;
  }

  .navegacao-lateral hr { display: none; }

  /* O texto de rollback continua na pagina, so que depois da fita e menor -
     e informacao de quem tem um problema, nao de quem esta chegando. */
  .navegacao-lateral > p:last-child {
    margin-top: .9rem !important;
    font-size: .8rem;
  }
}

@media (max-width: 575.98px) {
  /* Menos respiro entre secoes: em 360 px de largura, 2,5 rem em cima e
     embaixo de cada uma somam mais de uma tela inteira de espaco vazio ao
     longo da pagina. */
  .secao { padding: 2rem 0; }

  /* O cartao do programa perde o respiro interno de monitor. */
  .cartao-vantagem { padding: 1.25rem; }

  /* O nome do arquivo e o tamanho podem ser longos; sem `min-width: 0` o item
     que cresce nao encolhe, e a seta do fim e empurrada para fora da tela. */
  .baixar > .flex-grow-1 { min-width: 0; }

  .baixar {
    gap: .65rem;
    padding: .8rem .85rem;
  }

  /* Efeito de passar o mouse nao existe em toque, e o deslocamento so aparece
     preso depois do toque, como se o botao tivesse ficado torto. */
  .cartao-app:hover,
  .baixar:hover { transform: none; }
}