/* O 'padding-top' afasta o conteudo da faixa: sem ele o primeiro elemento cola na barra
   de servico e a tela le como um bloco so. O valor sai da escala (--espaco-5) e nao de um
   numero proprio — a folga aqui anda nos mesmos degraus de .secao e .bloco. */
.casca {
  max-width: var(--contêiner);
  margin-inline: auto;
  padding-inline: var(--goteira);
  padding-top: var(--espaco-5);
}

/* ===========================================================================
   BARRA DE SERVICO — a segunda linha da faixa, logo abaixo da arte da marca.

   POR QUE O TEXTO NAO FICA SOBRE A ARTE. O PNG da marca e cena fotografica escura,
   com variacao de luminancia ponto a ponto: sobre ele o contraste nao pode ser
   garantido por medicao unica. Sobre '--marca-fundo', que e cor plana, o branco rende
   18,93:1 — medido, e igual ao valor que o 00-tokens.css declara.

   POR QUE A EMENDA COM A ARTE NAO APARECE — e nao e por heranca. 'background' NAO e
   propriedade herdada em CSS; de '.masthead' a barra herda 'color', que e herdada, e
   nada mais. O fundo coincide porque a barra o DECLARA, com o mesmo '--marca-fundo' que
   o '.masthead' usa: sao duas declaracoes do mesmo token, nao uma cascata. A distincao
   importa para quem for editar — trocar o fundo do '.masthead' e esperar que a barra
   acompanhe nao funciona; os dois lugares mudam juntos ou a emenda aparece.
   =========================================================================== */
/* As regras de '.servico', '.servico__esquerda|direita', '.saudacao', '.servico__data' e
   a familia '.atalhos' NAO estao aqui: vivem mais abaixo, junto da barra do masthead,
   onde estao escritas as razoes de largura, filete, contraste medido e alvo de toque que
   valem para elas. Aqui ficam apenas o perfil e o que so ele usa.

   NENHUMA DELAS PODE SER DECLARADA NOS DOIS LUGARES. Com a mesma especificidade vence a
   de baixo, e a de cima fica sendo codigo morto que engana quem le a folha na ordem; pior,
   propriedade que exista so numa das copias — como o 'min-height' do alvo de toque de
   '.atalhos a' — se perde numa reordenacao inocente.
   'testes/test_css_cotejo.py::test_nenhum_seletor_e_declarado_duas_vezes_na_mesma_folha'
   impede a volta. */

/* Perfil: '<details>' nativo, e nao menu de JavaScript. Abre, fecha e e anunciado por
   leitor de tela sem uma linha de script — leitura e navegacao tem de funcionar sem
   JavaScript. O 'perfil.js' apenas acrescenta Esc e clique-fora. */
.perfil { position: relative; }

.perfil__gatilho {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--alvo-toque);
  padding-inline: var(--espaco-3);
  font-weight: 600;
  color: var(--tinta-inversa);
  border: var(--borda-estrutural) solid var(--tinta-inversa);
  border-radius: var(--raio);
}

/* Remove o triangulo que o navegador desenha por padrao no <summary>. */
.perfil__gatilho::-webkit-details-marker { display: none; }
.perfil__gatilho::marker { content: ""; }

/* Estado aberto por COR PLANA, nao por translucidez: 'rgba()' esta vedado neste projeto,
   e '--filete-inverso' e o token que serve sobre a faixa. Branco sobre ele: 12,97:1,
   medido. */
.perfil[open] > .perfil__gatilho { background: var(--filete-inverso); }

.perfil__ficha {
  position: absolute;
  top: calc(100% + var(--espaco-2));
  left: 0;
  z-index: 20;
  min-width: 20rem;
  padding: var(--espaco-4);
  text-align: left;
  background: var(--superficie);
  color: var(--tinta);
  border: var(--borda-estrutural) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: var(--elevacao-dura);
}

.perfil__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding-block: var(--espaco-1);
}

.perfil__rotulo { color: var(--tinta-suave); }
.perfil__valor { font-weight: 600; }

.perfil__producao {
  margin-top: var(--espaco-3);
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--filete);
}

.perfil__base {
  display: block;
  margin-top: var(--espaco-2);
  font-size: var(--passo--1);
  color: var(--tinta-suave);
}

.perfil__sair { margin-top: var(--espaco-3); }

/* Masthead: a arte da marca sangra de ponta a ponta, e a navegacao vem numa segunda
   linha logo abaixo. A cor do elemento e a mesma do fundo embutido no PNG, entao a
   emenda entre a faixa e a barra de navegacao nao aparece: le como um cabecalho so. */
.masthead { background: var(--marca-fundo); color: var(--tinta-inversa); }

/* A arte tem 2000x190 (10,53:1) e fundo escuro embutido. Como <img> centralizada ela
   viraria ilha, com preto liso sobrando dos lados; como background de largura total ela
   preenche a janela inteira, sem emenda e sem distorcer a logo.

   NEM 'cover' NEM ALTURA FIXA AQUI. 'height: 112px' com 'background-size: cover' CORTA
   A MARCA: 'cover' escala a arte ate COBRIR a caixa e descarta o excedente, e como
   112px e menor que a altura que a proporcao 10,53:1 pede em qualquer largura util, o
   descarte cai sobre o proprio neon — o logo e as tres linhas de texto saem decepados
   em cima e embaixo. A 1440px a arte rende 136,8px de altura numa caixa de 112px:
   24,8px jogados fora. Nenhuma altura fixa resolve, porque 'cover' escolhe o eixo e o
   tamanho do recorte sozinho, e a escolha muda a cada largura de janela.

   O QUE VALE E PROPORCAO, E NAO RECORTE. A largura e 100% e a altura DECORRE dela,
   via 'aspect-ratio' com a proporcao real do arquivo. 'background-size: 100% auto'
   completa o par: largura cheia, altura proporcional, nenhum excedente a descartar.
   A arte aparece INTEIRA em qualquer largura, e recorte deixa de ser possivel.

   A faixa escala junto com a tela — que e o comportamento proprio de uma faixa
   panoramica. Medido no DOM: 1440px de janela rendem 136,8px de altura;
   1024px rendem 97,3px; 768px rendem 73,0px.

   'aspect-ratio' ainda RESERVA O ESPACO antes de a imagem carregar, entao o par
   melhora o layout shift em vez de piora-lo: a altura da faixa e conhecida a partir do
   CSS, sem esperar o PNG.

   Margem de nitidez: ate 2000px de janela a escala e menor que 1, ou seja a arte e
   REDUZIDA, nunca ampliada. */
.masthead__faixa {
  width: 100%;
  aspect-ratio: var(--proporcao-faixa);
  /* O '?v=' e o digest do conteudo do PNG. Versionar ESTA FOLHA nao alcanca a arte:
     o navegador rebaixa a folha nova e nela le o mesmo endereco de imagem que ja tem
     em cache. Arte trocada sem mudar de nome nem de marcador deixa a tela na dimensao
     antiga. test_versao_do_estatico.py mantem o marcador em dia e informa o valor certo
     quando a arte for trocada. */
  background-image: url("../img/marca-cpe.png?v=366b90a8");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* A BARRA NAO SOBREPOE A ARTE. A arte escala com a janela, entao o pixel sob cada item
   muda com a largura e nao existe razao de contraste que se possa afirmar para todas
   elas — e a arte tem particulas quase brancas. Em barra propria, o fundo e chapado e a
   razao e fixa: --marca-acento sobre --marca-fundo, 10,75:1, que passa em AA (4,5:1) e
   em AAA (7:1) para texto pequeno. Medido, nao estimado.

   A barra e de LARGURA TOTAL e o conteudo dela e que fica preso ao --contêiner. Sem
   div de embrulho: o padrao 'max(goteira, (100% - contêiner)/2 + goteira)' faz a caixa
   sangrar e alinha o primeiro item com o <h1> de .casca, que abre em (100% - contêiner)
   /2 + goteira. A porcentagem resolve contra .masthead, que nao tem largura travada e
   portanto vale a janela. Um filete inverso separa a barra da arte — sem ele, com o
   mesmo --marca-fundo dos dois lados, faixa e barra leem como um bloco escuro so.
   O filete vive AQUI e nao em .masthead__faixa de proposito: em /entrar a barra nao
   existe (em base.html ela e condicionada a haver perfil), e uma borda presa a arte
   deixaria um risco orfao sob a faixa, sem nada embaixo para separar. */
.servico {
  background: var(--marca-fundo);
  border-top: 1px solid var(--filete-inverso);
  /* --espaco-1 em cima e embaixo, e nao padding assimetrico: a barra tem fio proprio, e
     assimetria a faria pender. */
  padding-block: var(--espaco-1);
  /* Barra de LARGURA TOTAL com o conteudo preso ao --contêiner, sem div de embrulho: e o
     que alinha o primeiro item com o <h1> de .casca. */
  padding-inline: max(var(--goteira), calc((100% - var(--contêiner)) / 2 + var(--goteira)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  flex-wrap: wrap;
}

.servico__esquerda,
.servico__direita {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
  flex-wrap: wrap;
}

.servico__direita { text-align: right; }

.saudacao { display: block; font-weight: 700; }
.servico__data { display: block; font-size: var(--passo--1); }

/* O <form> do 'Sair' e que e o item flex, nao o <button> dentro dele: sem display:flex
   aqui o botao nao alinha com os irmaos. Usa-se flex e nao 'display: contents' porque
   contents em <form> derruba a semantica da arvore de acessibilidade em parte dos
   motores — risco sem ganho, o alinhamento sai igual. */
.servico form { display: flex; }

/* Alvo de toque do link da barra, DECLARADO e nao herdado do vizinho: sem esta declaracao
   a altura vem por acidente, do flex esticando o link ate a altura do botao ao lado, e
   altura de elemento operavel nao pode depender de quem esta do lado.

   A cor e --marca-acento, e nao branco: na barra, link e texto precisam se distinguir por
   MAIS de um canal, e o branco da saudacao ja ocupa o canal do texto corrente. O ciano
   sobre --marca-fundo rende 10,75:1 — passa em AA (4,5:1) e em AAA (7:1). Medido.

   O sublinhado fica, e e o afordamento que nao depende de cor: quem nao resolve o ciano
   contra o fundo ainda distingue o operavel. */
.atalhos a {
  color: var(--marca-acento);
  font-size: var(--passo--1);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.atalhos {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  flex-wrap: wrap;
}

/* O grupo restrito a administradora, separado por um filete que serve sobre a faixa. */
.atalhos--gestao {
  border-left: 1px solid var(--filete-inverso);
  padding-left: var(--espaco-4);
}

.atalhos__externo { font-size: 0.8em; }

/* Alvo de toque do icone de retorno, declarado nos DOIS eixos. Nos atalhos de texto basta
   'min-height', porque a palavra ja da largura; um link cujo conteudo e um desenho nao
   tem largura de palavra, e sem 'min-width' o alvo encolhe para o tamanho do traco.

   A cor e --marca-acento, a mesma dos atalhos, porque isto e link e nao texto corrente.
   Nao leva sublinhado: o afordamento aqui e a forma reconhecivel da casa, e um risco sob
   um icone quadrado le como traco solto. */
.servico__inicio {
  color: var(--marca-acento);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
}

.servico__inicio svg { width: 1.25rem; height: 1.25rem; }

.secao { padding-block: var(--espaco-6); }
.secao__titulo { margin-block: 0 var(--espaco-4); }
.filete { border: 0; border-top: 1px solid var(--filete); margin-block: var(--espaco-4); }

/* Botao. Entra no registro pelos tokens: fio de 2px, sombra dura, raio de 6px. Fio de
   1px, raio proprio ou ausencia de sombra o fazem ler, ao lado dos cartoes, como
   controle de outro sistema. inline-flex porque .botao tambem veste <a> (Exportar CSV),
   e <a> em fluxo inline nao respeita altura de caixa. */
.botao {
  font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alvo-toque);
  padding: var(--espaco-2) var(--espaco-4);
  border: var(--borda-estrutural) solid var(--marca);
  border-radius: var(--raio);
  box-shadow: var(--elevacao-dura-marca);
  background: var(--superficie); color: var(--marca);
  cursor: pointer; text-decoration: none;
}
/* O primario ja e preenchido com a marca: sombra da marca sobre fundo da marca so o
   faria parecer 3px maior. A sombra dele e a do fio neutro. */
.botao--primario {
  background: var(--marca); color: var(--tinta-inversa);
  box-shadow: var(--elevacao-dura);
}

.campo { display: block; margin-block-end: var(--espaco-4); }
.campo__rotulo { display: block; font-size: var(--passo--1); color: var(--tinta-suave); }
/* Ajuda do campo: a exigencia de 12 caracteres aparece ANTES de a pessoa errar, e nao
   como mensagem de erro depois. Regra que se descobre por tentativa custa uma tentativa.
   Contraste: --tinta-suave sobre --superficie rende 6,64:1, declarado no 00-tokens.css. */
.campo__ajuda {
  display: block;
  margin-top: var(--espaco-1);
  font-size: var(--passo--1);
  color: var(--tinta-suave);
}
/* Campo de marcar: caixa e rotulo na MESMA linha. Sem isto o .campo__rotulo, que e
   'display: block', cai para a linha de baixo e o servidor le a marca separada do que
   ela significa. A linha inteira e o alvo — e por isso entra na regua de --alvo-toque. */
.campo--checkbox {
  display: flex; align-items: center; gap: var(--espaco-2);
  min-height: var(--alvo-toque);
}
.campo--checkbox .campo__rotulo { font-size: var(--passo-0); color: var(--tinta); }
/* Campo e seletor: mesma moldura dos demais elementos operaveis. O fio de 2px aqui nao
   e enfeite — e o limite da area clicavel, e por isso obedece a WCAG 1.4.11. */
.campo__entrada {
  font: inherit; width: 100%; min-height: var(--alvo-toque);
  padding: var(--espaco-2);
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta);
}

/* Selo de estado: cor MAIS rotulo textual, nunca cor sozinha. */
.selo {
  display: inline-flex; align-items: center; gap: var(--espaco-1);
  font-size: var(--passo--1); padding: 2px var(--espaco-2);
  border-radius: var(--raio); border: var(--borda-estrutural) solid currentColor;
}
.selo--ok { color: var(--estado-ok); }
.selo--atencao { color: var(--estado-atencao); }
.selo--perigo { color: var(--estado-perigo); }