/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ================================================================================================
   O PORTAL INTEL: as cinco portas (quatro ate a r85, 02/10/2026).
   ------------------------------------------------------------------------------------------------
   TUDO SAI DOS TOKENS DA CASA (assets/css/tokens.css) -- cor, raio, sombra, fonte, curva e duracao.
   Nenhum valor de cor solto aqui, e nao e preciosismo: os dois temas (claro e escuro) sao trocados
   redefinindo os tokens, entao um `#fff` escrito a mao neste arquivo seria uma mancha branca no
   tema escuro que ninguem veria ate o James abrir o painel de noite.

   MOVIMENTO REDUZIDO JA ESTA RESOLVIDO, e por isso nao ha bloco `prefers-reduced-motion` aqui: o
   `tokens.css` tem um global que zera duracao, atraso e repeticao de TUDO (linha 270). Escrever um
   segundo bloco aqui seria uma regra a mais para envelhecer e discordar da primeira.
   ================================================================================================ */

/* ================================================================================================
   TELA CHEIA: O PORTAL NAO E MAIS UMA TELA DENTRO DO PAINEL (19/09/2026, tarefa k01)
   ------------------------------------------------------------------------------------------------
   Pedido do Carvalho: "depois que a pessoa fizer o login, vai pra uma tela onde tem 4 botoes,
   coloque algo impressionante". A decisao que veio junto: menu lateral, busca, seletor de empresa e
   sino SAEM daqui. Escolher o negocio e uma PARADA, nao uma tela de navegacao -- e uma barra lateral
   com dez telas na frente de quem ainda vai escolher o negocio convida a pular a escolha.
   Depois de escolher, a casca volta INTEIRA dentro da porta: nada disto vaza para as outras telas.

   /!\ A COLUNA DO GRID SAI JUNTO COM O MENU, e esta e a armadilha que o Carvalho escreveu na
   propria tarefa. `.casca` e um grid de DUAS colunas (`var(--menu-w) minmax(0, 1fr)`, casca.css).
   Com o `<aside>` em `display: none` ele deixa de ser item do grid e `.principal` vira o PRIMEIRO
   item: cai na coluna de `--menu-w`. MEDIDO desfazendo a regra de proposito e lendo a largura no
   navegador: `.principal` fica com 256px de 1440 (o enunciado da tarefa dizia 248, que e a largura
   da CAIXA do menu -- `.menu-caixa` tira os 8px de respiro; a COLUNA e 256). Por isso a
   regra abaixo troca `grid-template-columns` na mesma linha em que esconde o menu -- as duas coisas
   sao uma so, e separa-las e o defeito.

   O GANCHO E `body[data-rota="portas"]`, que o roteador (assets/js/app.js) JA escreve a cada troca
   de tela, e que ele APAGA no login. Nenhum estado novo em JavaScript para isto existir, e nenhum
   jeito de a tela cheia sobrar acesa por cima de outra tela. */
body[data-rota="portas"] .casca,
html[data-menu="recolhido"] body[data-rota="portas"] .casca {
  grid-template-columns: minmax(0, 1fr);
}
body[data-rota="portas"] .menu {
  display: none;
}
/* A BARRA DO ALTO VOLTA AO PORTAL desde a r36 (26/09/2026), so com a busca e a conta da pessoa: a
   decisao daquele dia poe a barra compacta em toda tela, o Portal Intel incluido, e e do Portal que se
   entra em qualquer sistema -- a busca dali olha todos. O resto da barra (menu, Voltar, seletores,
   sino, "Mais") continua fora daqui, como a decisao de 19/09 pedia: escolher o negocio e uma parada. */
body[data-rota="portas"] .topo > :not(.busca-global, .topo-acoes),
body[data-rota="portas"] .topo-acoes > :not(.topo-conta, .busca-global-abrir) {
  display: none;
}
body[data-rota="portas"] .principal {
  margin: 0;
  outline: none;
  min-height: 100dvh;
}
/* O CONTEUDO PERDE O RESPIRO DE 16px e vira a coluna que segura a pagina inteira: a escolha no
   meio, o rodape colado embaixo. Sem `flex: 1` no recipiente o rodape subiria e ficaria boiando no
   meio da tela, logo abaixo das portas. */
body[data-rota="portas"] .conteudo {
  display: flex;
  flex-direction: column;
  padding: 0;
}
/* ---------- A CORRENTE DE CAIXAS ATE O PORTAL TEM DE ESTICAR INTEIRA ----------
   /!\ DEFEITO DE VERDADE, achado abrindo a foto depois da primeira versao desta tela: as quatro
   portas desenharam com 837px numa janela de 1440, e a faixa "Atualizado às 09:01" saiu FLUTUANDO
   no canto de cima da janela, fora de qualquer respiro.
   A CAUSA: entre `.recipiente` e `.portal` ha duas caixas que a casca monta e que ninguem lembra
   ao escrever CSS de tela -- `.pagina-corpo` (assets/js/app.js, `corpo`) e `.tela-painel` (o
   embrulho que carrega os avisos do topo junto com a tela). Com `.recipiente` virando flex, a
   `.pagina-corpo` passou a ser ITEM de flex, e item de flex nao estica sozinho: ele fica do tamanho
   do proprio conteudo. Esticar so a primeira caixa da corrente nao estica a ultima.
   Por isso as quatro linhas abaixo, e nao uma: cada elo precisa dizer que passa o espaco adiante. */
body[data-rota="portas"] .recipiente,
body[data-rota="portas"] .pagina-corpo {
  max-width: none;
  flex: 1;
  display: flex;
  min-width: 0;
  /* /!\ `margin: 0` NAO E LIMPEZA, E O CONSERTO. `.recipiente` nasce com `margin: 0 auto 0 0`
     (casca.css) para encostar o conteudo a esquerda. Enquanto `.conteudo` era um bloco comum isso
     era margem normal; virando coluna de flex, uma margem `auto` no eixo TRANSVERSAL desliga o
     `stretch` e a caixa encolhe ate o tamanho do proprio conteudo.
     MEDIDO na foto: a saudacao "Boa tarde, Chefe" saiu quebrada em tres linhas de uma palavra, e o
     aviso das empresas sem porta virou uma coluna de 30px com uma palavra por linha. Nada no CSS
     desta tela estava errado: a caixa acima dela e que tinha 110px. */
  margin: 0;
}
/* O EMBRULHO DA TELA E QUEM CARREGA A TEXTURA, e nao o `.portal` la dentro. Ele e o primeiro elo
   que contem TUDO: os avisos do topo (leitura incompleta, "o Sankhya nao respondeu"), a escolha, e
   a linha de rodape da tela. Com a textura no `.portal`, os avisos ficavam POR FORA dela, numa
   faixa branca colada no alto da janela. */
body[data-rota="portas"] .tela-painel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* O CLARAO DO MEIO SAIU (r95, programa 017, 04/10/2026): era degrade de enfeite (R6, secao 6, "Refaz", a luz do
     Portal). Fica so a textura de pontos, que e o chao da tela e nao chama o olho para lugar nenhum. */
  background-image: radial-gradient(circle at 1px 1px, var(--pontos) 1px, transparent 1.6px);
  background-size: 26px 26px;
}
/* OS AVISOS DA CASCA CONTINUAM NA TELA -- so passam a ter respiro. Esconde-los seria trocar um
   defeito de desenho por um defeito de verdade: e a linha que diz "estes numeros sao de ontem" e
   "a leitura veio incompleta", e ela vale mais aqui do que em qualquer outra tela, porque esta e a
   primeira que o James abre todo dia. */
body[data-rota="portas"] .tela-painel > :not(.portal) {
  margin: 0;
  padding: 10px clamp(16px, 4vw, 48px) 0;
}
/* O CREDITO CONTINUA NA TELA, centralizado e discreto. Esconder o rodape junto com o resto da casca
   tiraria o "Desenvolvido por Carvalho" exatamente da pagina que e a cara do sistema. */
body[data-rota="portas"] .rodape {
  justify-content: center;
  gap: 4px 12px;
  padding: 20px 16px calc(20px + var(--recorte-base));
  font-size: 13px;
}

/* ---------- A PAGINA: textura e o ar em volta ----------
   TEXTURA SUTIL, e sutil e a palavra: a malha de pontos e a MESMA que o painel ja usa em
   `--pontos`, a 26px de distancia um do outro -- longe o bastante para o olho sentir profundidade
   sem enxergar o padrao. (O clarao da cor primaria por cima dela saiu na r95: degrade de enfeite.)
   ESTATICO DE PROPOSITO: o Carvalho recusou o nivel "maximo impacto" com estas palavras -- nada de
   particula, nada de gradiente em movimento no fundo. Fundo que se mexe atras de numero de dinheiro
   pede atencao para o lugar errado. */
.portal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px clamp(16px, 4vw, 48px) 8px;
}
.portal-cabeca {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.portal-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 44px E O ALVO DE TOQUE DA CASA, e este numero saiu de portao, nao de gosto: a marca nasceu com
     a altura da propria figura (34px) e `scripts/testar-mobile.sh` reprovou em CINCO tamanhos de
     tela -- "alvo de toque pequeno demais para o dedo". Nao muda nada na tela larga: o cabecalho ja
     tem `min-height: 44px`, entao o link so passa a preencher a altura que ja existia. */
  min-height: 44px;
  color: var(--foreground);
  font-size: 15px;
  text-decoration: none;
}
.portal-marca:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
/* A ESCOLHA FICA NO MEIO DA JANELA, e o `margin: auto` vertical e o que faz isso sem `position`
   nenhuma: sobra igual em cima e embaixo enquanto couber, e em tela baixa o bloco simplesmente
   volta ao fluxo e a pagina rola -- em vez de cortar a ultima porta, que e o que `center` fixo faz. */
.portal-centro {
  /* CENTRALIZA PELO `align-self` E NAO POR MARGEM `auto` NA HORIZONTAL: dentro de uma coluna de
     flex, margem `auto` no eixo transversal briga com a largura declarada (a mesma armadilha que
     encolheu `.recipiente`, logo acima). `align-self` centraliza sem tocar no dimensionamento.
     A margem `auto` que sobrou e so a VERTICAL, e e ela que deixa a escolha no meio da janela:
     sobra igual em cima e embaixo enquanto couber, e em tela baixa o bloco volta ao fluxo e a
     pagina rola -- em vez de cortar a ultima porta, que e o que `center` fixo faz. */
  align-self: center;
  width: min(100%, 1120px);
  margin: auto 0;
  padding: 24px 0;
}
.portal-saudacao {
  margin: 0 0 28px; /* r84: o respiro que era da pergunta, que saiu */
  font-family: var(--fonte-numero);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- A GRADE EM CRUZ, que e o desenho que o Carvalho mandou ----------
   Intel no meio, Nova Ceasa a esquerda, Grupo JAP a direita, Piaui Polo embaixo do Intel:

       +-----------+--------------+-----------+
       | Nova Ceasa|  Painel Intel| Grupo JAP |
       +-----------+--------------+-----------+
       |           |  Piaui Polo  |           |
       +-----------+--------------+-----------+

   A coluna do meio e mais larga (1.35fr) de proposito: o Painel Intel e a porta de decisao, e a
   unica que mostra o grupo inteiro. As de fora esticam ate a altura da linha 1 (`stretch`, que e o
   padrao do grid), entao as tres portas de cima terminam alinhadas embaixo.
   A ORDEM NO CODIGO E A ORDEM NO CELULAR -- ver o bloco de 860px, la embaixo. */
/* O VAO ENTRE AS PORTAS TEM DE SER LIDO EM TRES LUGARES: a grade, os fios que atravessam o vao, e
   a distancia de onde cada porta vem na entrada. Um token so, e nao tres numeros que envelhecem
   separados -- mexer no vao e mexer nos fios, sempre. */
.portal-grade {
  --portal-vao: 18px;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: var(--portal-vao);
  align-items: stretch;
}
.portal-grade > [data-porta="novaceasa"] { grid-area: 1 / 1; }
.portal-grade > [data-porta="intel"] { grid-area: 1 / 2; }
.portal-grade > [data-porta="jap"] { grid-area: 1 / 3; }
.portal-grade > [data-porta="polo"] { grid-area: 2 / 2; }
/* A CRUZ COMPLETA (r85, 02/10/2026): a quinta porta, o Maquina de Vendas, entra no braco de CIMA do Painel
   Intel, que o desenho de quatro deixava vazio, e as outras descem uma fileira. A ordem da lista PORTAS ja
   e a de leitura desta cruz (assets/erp/portas.js), entao o Tab continua seguindo o olho.

       +-----------+-------------------+-----------+
       |           | Maquina de Vendas |           |
       | Nova Ceasa|    Painel Intel   | Grupo JAP |
       |           |  Polo Piaui Center|           |
       +-----------+-------------------+-----------+ */
.portal-grade[data-cruz="5"] > [data-porta="maquina"] { grid-area: 1 / 2; }
.portal-grade[data-cruz="5"] > [data-porta="novaceasa"] { grid-area: 2 / 1; }
.portal-grade[data-cruz="5"] > [data-porta="intel"] { grid-area: 2 / 2; }
.portal-grade[data-cruz="5"] > [data-porta="jap"] { grid-area: 2 / 3; }
.portal-grade[data-cruz="5"] > [data-porta="polo"] { grid-area: 3 / 2; }
/* MENOS DE QUATRO PORTAS (tarefa r14): o Portal mostra so os sistemas em que a pessoa entra, e a cruz
   so faz sentido com as quatro. Com duas ou tres, uma fileira de cartoes do mesmo tamanho, na ordem do
   desenho, sem os fios que ligariam a um Painel Intel que talvez nem esteja ali. Quem entra num sistema
   so nem ve o Portal (a casca o leva direto para dentro). */
.portal-grade:not([data-cruz]) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.portal-grade:not([data-cruz]) > [data-porta] {
  grid-area: auto;
}
.portal-grade:not([data-cruz]) > [data-porta]::after {
  content: none;
}

/* A COR DA MARCA DE CADA PORTA (r84): o cartao le DUAS variaveis, `--porta-marca` (o filete do alto, o contorno da
   pastilha e o circulo da seta: figura, 3:1 ou mais) e `--porta-texto` (a palavra Sistema/Integracao: texto, 4,5:1
   ou mais sobre o cartao). Sem folha de porta valem as do proprio Painel Intel (`--primary`); cada folha em
   assets/css/sistemas/ redefine as duas com a marca dela, no claro e no escuro, com o contraste ao lado. */
.porta-cartao {
  --porta-marca: var(--primary);
  --porta-texto: var(--primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  min-height: 178px;
  /* O NOME NO CENTRO, E NAO ENCOSTADO NO TETO. Com o valor e as tres linhas de apoio fora (decisao
     do Carvalho em 19/09/2026), o conteudo do cartao virou uma linha so, e ela ficava la em cima
     com 100px de vazio embaixo: o cartao nao parecia limpo, parecia esvaziado. Centrado, o vazio
     vira respiro em volta do nome em vez de buraco debaixo dele, que e a diferenca entre "so o
     nome, de forma surpreendente" e "cartao a que falta alguma coisa". O selo continua no topo
     (`position: absolute` na regra dele), entao ele nao entra nesta conta. */
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  text-decoration: none;
  box-shadow: var(--sombra-sm);
  /* `transform` e `box-shadow` e mais nada: as duas nao remexem o layout. Uma transicao em
     `padding` ou `height` aqui faria as quatro portas recalcularem a grade a cada passada do
     mouse, na tela que abre sempre. */
  transition:
    transform var(--rapido) var(--saida),
    box-shadow var(--rapido) var(--saida),
    border-color var(--rapido) var(--saida);
  /* A ENTRADA ENCADEADA, em 160 ms (r84: eram 440; o movimento do painel e de no maximo 200 ms, principio V da
     constituicao). Curva e nome dos passos logo abaixo; `backwards` e explicado la. */
  animation: porta-chega 160ms var(--saida) backwards;
}
/* O FILETE NA COR DA MARCA, no alto do cartao: de 4 px, por dentro da borda, com o canto de cima do cartao. */
.porta-cartao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--porta-marca);
  pointer-events: none;
}
/* A PASTILHA COM O SIMBOLO DA PORTA: a marca de cada sistema (a que a barra lateral mostra) numa caixa de 52 px
   tingida com a cor dela. E a marca que MARCA o assunto do cartao, nao enfeite: o nome continua escrito logo
   abaixo, e a imagem e so para o olho (alt vazio, o leitor de tela le o nome). A imagem e a da lateral desenhada
   para fundo claro, nos dois temas. */
.porta-pastilha {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: var(--radius-lg);
  /* LADRILHO CLARO NOS DOIS TEMAS: o papel e branco fixo (os simbolos sao desenhados para fundo claro e logotipo nao
     inverte), tingido com 14% da cor da porta. */
  background: color-mix(in srgb, var(--porta-marca) 14%, var(--papel-logotipo));
}
.porta-pastilha .marca-simbolo {
  height: 30px;
  max-width: 38px;
}
/* ---------- O FIO QUE LIGA AS TRES AO CENTRO ----------
   "o portal Intel fica como um portal de integracao" -- a frase do Carvalho vira desenho aqui: um
   fio de 1px atravessando o vao entre cada porta de negocio e o Painel Intel. Ele mora FORA do
   cartao (no vao), e nao atras dele: atras ficaria escondido pelo fundo opaco do proprio cartao, e
   resolver isso com `z-index: -1` nao funcionaria, porque o cartao cria contexto de empilhamento
   proprio no instante em que ganha `transform` (a animacao de entrada). Fora do cartao, nao ha
   empilhamento nenhum para resolver.
   SO NA CRUZ (`[data-cruz]`), corrigido na r105 (07/10/2026): sem ele, esta regra empatava em especificidade com a
   `content: none` da fileira (`.portal-grade:not([data-cruz])`, la em cima) e ganhava por vir depois, entao a fileira
   de tres cartoes (o Portal de todos desde a r105, e o do operador desde a r14) desenhava um tracinho solto no vao,
   em cima do Polo e ao lado da Nova Ceasa. Medido na foto de 1440 da r105. */
.portal-grade[data-cruz] > [data-porta]:not([data-porta="intel"])::after {
  content: "";
  position: absolute;
  background: var(--border);
  pointer-events: none;
}
.portal-grade > [data-porta="novaceasa"]::after {
  top: 50%;
  right: calc(var(--portal-vao) * -1);
  width: var(--portal-vao);
  height: 1px;
}
.portal-grade > [data-porta="jap"]::after {
  top: 50%;
  left: calc(var(--portal-vao) * -1);
  width: var(--portal-vao);
  height: 1px;
}
.portal-grade > [data-porta="polo"]::after {
  left: 50%;
  top: calc(var(--portal-vao) * -1);
  width: 1px;
  height: var(--portal-vao);
}
/* o braco de cima liga pelo pe, atravessando o vao ate o Painel Intel */
.portal-grade > [data-porta="maquina"]::after {
  left: 50%;
  bottom: calc(var(--portal-vao) * -1);
  width: 1px;
  height: var(--portal-vao);
}
/* `hover: hover` porque no toque o "hover" fica GRUDADO depois do toque -- o cartao ficaria
   levantado ate a pessoa tocar em outro lugar, parecendo selecionado sem estar. */
@media (hover: hover) and (pointer: fine) {
  .porta-cartao:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-lg);
    border-color: var(--ring);
  }
}
/* O TECLADO VE A MESMA PROFUNDIDADE QUE O MOUSE. Sem esta regra, quem navega por Tab recebia so o
   contorno de foco e nao a profundidade -- efeito reservado a quem tem mouse e um contorno seco para
   quem nao tem. */
.porta-cartao:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sombra-lg);
}

/* ================================================================================================
   AS QUATRO PORTAS CHEGAM, UMA DE CADA VEZ -- e cada uma pelo lado dela
   ------------------------------------------------------------------------------------------------
   O Painel Intel assenta no lugar (so escala), e as tres portas de negocio deslizam para ele: a
   Nova Ceasa vem da esquerda, o Grupo JAP da direita, o Piaui Polo de baixo. O caminho de cada uma
   e a posicao dela no desenho, entao o movimento CONTA a mesma coisa que o desenho: tres sistemas
   se encaixando num portal de integracao.

   /!\ ISSO NAO E ESCOLHA DE GOSTO, E O QUE IMPEDE DUAS CAIXAS DE ENCOSTAREM NO MEIO DA ANIMACAO.
   A primeira versao era o obvio (todas subindo, `translateY(14px) -> 0`, escalonadas). Com um vao
   de 18px, uma porta que ja chegou ao lado de outra ainda deslocada 14px deixa 4px de folga -- e o
   medidor de colisao (`~/.claude/padroes/colisao-de-caixas/medir-colisao.mjs`) mede num INSTANTE:
   ele acusaria caixa encostada numa tela cujo desenho parado tem 18px de folga. Com cada porta
   vindo do lado de FORA, o vao entre duas so ABRE durante a animacao, nunca fecha.

   NENHUM FADE, e este e o segundo motivo pelo qual so ha transform aqui. A casa usa `--op-in: 0.85`
   como piso de opacidade em reveal, e medi o contraste no MEIO do fade, que e o que a skill `motion`
   manda medir: `--muted-foreground` (#5b6b60) a 85% sobre branco da 4,07:1 -- abaixo dos 4,5:1 que
   este painel exige. A 90% da 4,52:1, que e raspar o limite. Entao a porta nao desaparece em
   momento nenhum: ela esta LEGIVEL no primeiro quadro, com o contraste inteiro, e so escorrega
   para o lugar.

   `backwards` E NAO `both`, e a diferenca importa duas vezes:
     1. com `both`, o quadro final da animacao fica GRUDADO no elemento e vence a transicao de
        `:hover` na cascata -- o cartao pararia de levantar sob o mouse, calado;
     2. `backwards` segura o primeiro quadro so durante o atraso e devolve o controle ao terminar.
   Movimento reduzido ja esta resolvido pelo bloco global de tokens.css (linha 270), que zera
   duracao E atraso: a porta aparece direto no lugar. */
@keyframes porta-chega {
  from { transform: var(--porta-de); }
}
/* r84: 160 ms de duracao e 20 ms de atraso entre uma porta e a seguinte (a ultima acaba em 200 ms), e o
   deslocamento de 14 px em vez de 22: o vao de 18 px continua so abrindo durante a entrada, nunca fechando. */
.portal-grade > [data-porta="intel"] { --porta-de: scale(0.985); }
.portal-grade > [data-porta="novaceasa"] { --porta-de: translateX(-14px); animation-delay: 20ms; }
.portal-grade > [data-porta="jap"] { --porta-de: translateX(14px); animation-delay: 20ms; }
.portal-grade > [data-porta="polo"] { --porta-de: translateY(14px); animation-delay: 40ms; }
/* a quinta porta vem de CIMA, pelo lado de fora da cruz: o vao com o Painel Intel so abre na entrada, nunca fecha (r85) */
.portal-grade > [data-porta="maquina"] { --porta-de: translateY(-14px); animation-delay: 40ms; }
.porta-cartao:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* A PORTA DO MEIO E A DE DECISAO, e ela se distingue pela BORDA e pelo tamanho do numero, nunca
   por um fundo cheio: fundo colorido sob um numero grande derruba o contraste do numero, e este
   painel mede contraste. */
.porta-cartao[data-porta="intel"] {
  border-color: var(--primary);
  border-width: 2px;
  background: var(--accent);
  color: var(--accent-foreground);
  /* O ANEL E SOMBRA, NAO BORDA: uma segunda borda mudaria a caixa e empurraria o vao de 18px para
     16px. `box-shadow` nao ocupa espaco nenhum, entao o halo do centro nao mexe com a folga que o
     medidor de colisao confere. */
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--primary) 8%, transparent),
    var(--sombra-md);
}
@media (hover: hover) and (pointer: fine) {
  .porta-cartao[data-porta="intel"]:hover {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--primary) 12%, transparent),
      var(--sombra-lg);
  }
}
.porta-cartao[data-porta="intel"]:focus-visible {
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--primary) 12%, transparent),
    var(--sombra-lg);
}
.porta-cartao[data-porta="intel"] /* O NOME E A TELA. Redesenho de 19/09/2026, depois que o Carvalho tirou os numeros do portal:
   "so os nomes de forma surpreendente". Com o valor, o rotulo do periodo, a data e a contagem
   fora, o cartao ficou com uma linha de 21px no meio de 178px de altura -- nao virou minimalismo,
   virou cartao esvaziado. O nome passa a ocupar o cartao: 34px na tela larga, `clamp` para nao
   quebrar "Piaui Polo Center" em telefone estreito, e `text-wrap: balance` para o nome de duas
   palavras nao deixar uma orfa na segunda linha. */
/* O QUE SUMIU DESTE ARQUIVO EM 19/09/2026: `.porta-resumo`, `.porta-numero`, `.porta-medida`,
   `.porta-quantas`, `.porta-sem-numero` e `.porta-parada`. Elas vestiam o valor de cada negocio, a
   janela que ele cobria, a data da medicao, a contagem de empresas e o aviso de ERP calado. O
   Carvalho tirou tudo isso do portal: "so os nomes de forma surpreendente". Regra de CSS sem
   elemento no HTML e pior que codigo morto comum, porque ninguem tropeca nela: ela so engorda a
   folha e faz a proxima pessoa acreditar que a tela desenha o que nao desenha. */
.porta-cabeca h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.porta-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.porta-cabeca h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
/* A SETA NUM CIRCULO NA COR DA MARCA: tingido em repouso, cheio no mouse (a seta passa para a cor do chao da
   pagina: 3:1 ou mais sobre o circulo cheio, e o circulo e figura). So `transform`, `background` e `color`, 150 ms. */
.porta-cabeca svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--porta-marca) 14%, var(--card));
  color: var(--porta-texto);
  transition:
    transform var(--rapido) var(--saida),
    background-color var(--rapido) var(--saida),
    color var(--rapido) var(--saida);
}
@media (hover: hover) and (pointer: fine) {
  .porta-cartao:hover .porta-cabeca svg {
    transform: translateX(3px);
    background: var(--porta-marca);
    color: var(--background);
  }
}


/* O `<strong>` que conta e o `.sr-only` parado sao irmaos dentro daqui. `display: block` no
   wrapper para o par ocupar a linha inteira como o `<strong>` sozinho ocupava. */
.porta-valor {
  display: block;
}

.porta-numero small,
.porta-quantas,

/* /!\ AQUI MORAVA UM P1, achado por critico de contexto limpo em 19/09/2026 MEDINDO a cor composta
   no navegador. Esta linha era `opacity: 0.85`, e opacidade mistura o texto com o fundo: o
   `--muted-foreground` (#5b6b60) virava rgb(116,129,120) no cartao branco e rgb(112,127,117) no
   cartao do meio. Medido: 4,07:1 e 3,68:1 -- os dois abaixo dos 4,5:1 que esta tarefa exige, em
   texto de 12px peso 400 (que nao e "texto grande", entao nao ha desconto).
   O ABSURDO DA COISA: o numero 4,07:1 ja estava escrito nesta mesma folha, 127 linhas acima, como
   o MOTIVO para a entrada das portas nao ter fade nenhum. Eu recusei o fade por causa dele e deixei
   a opacidade permanente na linha de baixo.
   E e justamente a linha que separa um numero de hoje de um de tres dias atras -- a que foi P0 na
   rodada anterior. Sem a opacidade, medido: 5,65:1 no cartao branco e 4,95:1 no do meio.
   Hierarquia visual, se voltar a ser preciso, sai de TOKEN DE COR e nunca de `opacity`. */
/* "O SANKHYA NAO RESPONDEU DEPOIS DISSO" precisa ser LIDA, nao decorada: e a linha que separa um
   numero de hoje de um numero de tres dias atras. Entao ela ganha a cor de alerta do painel -- sem
   virar faixa vermelha, que faria o cartao inteiro parecer quebrado quando o que houve foi o ERP
   demorar.
   /!\ O SELETOR PRECISA DOS DOIS PEDACOS, e ate 19/09/2026 ele nao tinha: escrito so `.porta-parada`
   ele vale (0,1,0) e perde para `.porta-numero small`, que vale (0,1,1) -- entao o `color` NUNCA
   entrava, e a cor computada da linha era `--muted-foreground` como a de qualquer legenda.
   Achado por critico de contexto limpo lendo o valor COMPUTADO no navegador, e so ficou visivel
   depois que eu tirei o `opacity: 0.85` da vizinha: ate ali a linha se destacava por ser a unica
   opaca, e o `opacity: 1` daqui era o que fazia esse trabalho. Tirada a transparencia da vizinha,
   esse `opacity: 1` virou letra morta e sobrou so o peso da fonte separando as duas.
   O comentario antigo AFIRMAVA "ganha a cor de alerta do painel" enquanto a tela nao ganhava. */
.porta-numero small.porta-parada {
  color: var(--alerta, var(--muted-foreground));
  font-weight: 500;
}
/* "Ainda nao sabemos" ocupa o mesmo lugar do numero, e nao some: cartao que encolhe quando falta
   dado faz as quatro portas pularem de altura na hora em que a medicao chega. */

/* O CHIP DAS EMPRESAS SEM PORTA (r84): um `details` cujo resumo e o chip; o toque (ou o clique) abre a linha com os nomes.
   O resumo tem a altura de um alvo de toque (44 px no celular, 28 no computador, que e o piso da casa). */
.portal-orfas {
  margin: var(--portal-vao, 18px) 0 0;
}
.portal-orfas > summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
}
.portal-orfas > summary::-webkit-details-marker {
  display: none;
}
.portal-orfas > p {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.5;
}
@media (pointer: coarse) {
  .portal-orfas > summary {
    min-height: 44px;
  }
}

/* ---------- CELULAR: "esquerda, meio, direita" nao existe ----------
   A ORDEM NO TELEFONE E: Nova Ceasa, Painel Intel, Grupo JAP, Piaui Polo -- a mesma ordem em que
   as portas estao escritas em assets/erp/portas.js, e por isso basta desligar as areas da grade.
   /!\ ATE 19/09/2026 O PAINEL INTEL VINHA PRIMEIRO AQUI, e a troca nao foi de gosto: a ordem da
   lista passou a ser a ordem em que o OLHO le a cruz na tela larga, porque `grid-area` move a caixa
   na tela e nao move nada na arvore do documento -- o Tab e o leitor de tela seguem a arvore. Com
   a lista comecando pelo Intel, quem navegava por teclado ia do meio para a esquerda, depois para
   BAIXO, e so entao para a direita. Uma ordem so, valendo nas duas larguras, e a unica forma de
   desenho, teclado e leitor de tela contarem a mesma historia; o motivo inteiro esta em
   assets/erp/portas.js, junto da lista.
   Uma coluna so: duas colunas de 160px num iPhone deixam o numero de R$ 14,5 mi quebrando em duas
   linhas, e numero de dinheiro quebrado se le errado. */
@media (max-width: 859.98px) {
  .portal-grade {
    grid-template-columns: 1fr;
  }
  .portal-grade > [data-porta],
  .portal-grade[data-cruz] > [data-porta] {
    grid-area: auto;
  }
  /* NO CELULAR O PAINEL INTEL VEM PRIMEIRO, e isto NAO desfaz o conserto de acessibilidade acima.
     Decisao do Carvalho em 19/09/2026, olhando a foto do celular.
     A DIFERENCA QUE FAZ ISSO SER LEGITIMO: `order` do flex/grid muda a ordem VISUAL, e o Tab e o
     leitor de tela continuam seguindo a arvore do documento. Na tela larga isso seria defeito,
     porque olho e teclado contariam historias diferentes lado a lado. Numa COLUNA SO nao ha "lado
     a lado": a WCAG 2.4.3 cobra que a ordem do foco preserve o SENTIDO, e numa lista vertical de
     quatro atalhos independentes, comecar pelo portal de integracao ou pelo primeiro negocio nao
     muda sentido nenhum. O portao P14 continua cobrando as quatro numa coluna, sem rolagem de
     lado; o P?? do Tab continua cobrando a arvore, que nao mudou.
     POR QUE O INTEL PRIMEIRO: ele e o portal de integracao, o unico que fala de todas as empresas,
     e e por onde o James entra quando quer decidir. No telefone, onde so cabe um cartao por vez,
     o primeiro e o unico que se ve sem rolar. */
  .portal-grade > [data-porta="intel"] {
    order: -1;
  }
  /* SEM CRUZ NAO HA FIO LIGANDO NADA: numa coluna so, um risco de 18px saindo da lateral de um
     cartao nao liga porta nenhuma a porta nenhuma -- e um tracinho solto no ar. */
  .portal-grade > [data-porta]::after {
    display: none;
  }
  /* TODAS ENTRAM PELA HORIZONTAL AQUI, e isto e o mesmo cuidado de cima visto de outro angulo: numa
     coluna unica as portas sao vizinhas VERTICAIS, entao a que vinha de baixo (`translateY(22px)`)
     fecharia o vao com a de baixo dela durante a animacao. Deslocamento horizontal, numa coluna,
     nao fecha vao com ninguem. */
  .portal-grade > [data-porta] {
    --porta-de: translateX(-14px);
  }
  .porta-cartao {
    min-height: 0;
    padding: 16px;
  }
  .porta-cartao[data-porta="intel"] .porta-numero strong { font-size: 26px; }
  .portal-centro {
    padding: 8px 0 16px;
  }
  .portal-saudacao {
    margin-bottom: 20px;
  }
}

/* O TRILHO DAS PORTAS NA BARRA LATERAL SAIU EM 24/09/2026 (tarefa r12), por ordem do Carvalho: "cada
   sistema e separado". No lugar dele ha um botao so, "Portal Intel" (`.botao-portal`, em casca.css).
   Nao recoloque: scripts/testar-sistemas.mjs reprova se a classe voltar. */

/* ================================================================================================
   R138 (09/10/2026): OS TRES CARTOES DE ENTRADA PROPRIA NO PORTAL, num bloco so, do fim do arquivo
   ------------------------------------------------------------------------------------------------
   Painel do RH, App da auditoria e Sistema Ceasa de teste (`data-app`, e NUNCA `data-porta`: o fio da cruz e as regras de
   sistema leem `data-porta`). Saem do MESMO molde dos cartoes de sistema (assets/js/telas/portas.js, `moldeDoCartao`), entao
   quase tudo acima vale para eles; aqui moram so as DIFERENCAS: a cor de cada um, a marca de teste, a grade com sete e o
   cartao em linha. Sem cartao novo nenhuma regra deste bloco acende (todas pedem `data-de-baixo`, `data-app` ou `data-selo`).
   ------------------------------------------------------------------------------------------------
   A GRADE COM SETE (860 px ou mais), seis colunas, tres fileiras: os sistemas de negocio em cima, o Painel Intel numa faixa
   da largura toda, os cartoes novos embaixo. `data-de-cima` e `data-de-baixo` (atributos da grade, escritos por portas.js) dizem
   quantos cartoes tem a fileira, e o span parte a fileira em partes iguais, sem buraco: 1 cartao ocupa 6 colunas, 2 ocupam 3,
   3 ocupam 2. Com 4 ou 5 em cima (nao acontece hoje) ficam dois por linha ou tres, a ultima linha pode ficar curta.
   A cruz (`data-cruz`, quando o Grupo JAP voltar) nao muda de desenho: os novos vao numa fileira a mais embaixo, sem fio.
   ================================================================================================ */
@media (min-width: 860px) {
  .portal-grade[data-de-baixo]:not([data-cruz]) {
    grid-template-columns: repeat(6, 1fr);
  }
  .portal-grade[data-de-baixo]:not([data-cruz]) > [data-porta]:not([data-porta="intel"]) {
    grid-area: auto;
    grid-column: span 2;
    /* os de cima saem pelo alto: o vao com o Painel Intel (embaixo deles) so abre na entrada, e os de lado andam juntos */
    --porta-de: translateY(-14px);
    animation-delay: 20ms;
  }
  .portal-grade[data-de-cima="1"]:not([data-cruz]) > [data-porta]:not([data-porta="intel"]) { grid-column: span 6; }
  .portal-grade[data-de-cima="2"]:not([data-cruz]) > [data-porta]:not([data-porta="intel"]),
  .portal-grade[data-de-cima="4"]:not([data-cruz]) > [data-porta]:not([data-porta="intel"]) { grid-column: span 3; }
  .portal-grade[data-de-baixo]:not([data-cruz]) > [data-porta="intel"] {
    grid-area: auto;
    grid-column: 1 / -1;
    min-height: 0;
    padding: 20px 26px;
  }
  .portal-grade[data-de-baixo] > [data-app] {
    grid-column: span 2;
    /* os de baixo entram por baixo (o vao com o Painel Intel, em cima deles, so abre) */
    --porta-de: translateY(14px);
    animation-delay: 40ms;
  }
  .portal-grade[data-de-baixo="1"] > [data-app] { grid-column: span 6; }
  .portal-grade[data-de-baixo="2"] > [data-app] { grid-column: span 3; }

  /* A CRUZ COM OS NOVOS EMBAIXO: seis trilhos (1fr 1fr 1,35fr 1,35fr 1fr 1fr) fazem as mesmas tres colunas de antes (2fr, 2,7fr e 2fr) e
     deixam a fileira de baixo se dividir em 1, 2 ou 3 partes iguais sem buraco. Cada coluna da cruz ocupa dois trilhos. */
  .portal-grade[data-cruz][data-de-baixo] {
    grid-template-columns: 1fr 1fr 1.35fr 1.35fr 1fr 1fr;
  }
  .portal-grade[data-cruz][data-de-baixo] > [data-porta="novaceasa"] { grid-column: 1 / 3; }
  .portal-grade[data-cruz][data-de-baixo] > [data-porta="intel"],
  .portal-grade[data-cruz][data-de-baixo] > [data-porta="maquina"],
  .portal-grade[data-cruz][data-de-baixo] > [data-porta="polo"] { grid-column: 3 / 5; }
  .portal-grade[data-cruz][data-de-baixo] > [data-porta="jap"] { grid-column: 5 / 7; }
  .portal-grade[data-cruz="4"][data-de-baixo] > [data-app] { grid-row: 3; }
  .portal-grade[data-cruz="5"][data-de-baixo] > [data-app] { grid-row: 4; }
}

/* O CARTAO EM LINHA (pastilha a esquerda, nome ao lado, seta na ponta direita): e o Painel Intel na faixa da largura toda (860 px
   ou mais), e, no celular, TODOS os cartoes menos o Painel Intel, para os sete caberem sem uma rolagem enorme. Uma linha so: a
   etiqueta do papel, que ocupava a de cima, saiu do molde (juncao da r156, 10/10/2026; a r95 ja a tinha tirado dos de sistema). */
@media (min-width: 860px) {
  .portal-grade[data-de-baixo]:not([data-cruz]) > [data-porta="intel"] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "pastilha cabeca";
    align-content: center;
    align-items: center;
    column-gap: 18px;
  }
  .portal-grade[data-de-baixo]:not([data-cruz]) > [data-porta="intel"] > .porta-pastilha { grid-area: pastilha; margin-bottom: 0; }
  .portal-grade[data-de-baixo]:not([data-cruz]) > [data-porta="intel"] > .porta-cabeca { grid-area: cabeca; }
}
@media (max-width: 859.98px) {
  .portal-grade[data-de-baixo]:not([data-cruz]) {
    grid-template-columns: 1fr;
  }
  .portal-grade[data-de-baixo] > .porta-cartao:not([data-porta="intel"]) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "pastilha cabeca";
    align-content: center;
    align-items: center;
    column-gap: 14px;
    padding: 12px 16px;
  }
  .portal-grade[data-de-baixo] > .porta-cartao:not([data-porta="intel"]) > .porta-pastilha { grid-area: pastilha; margin-bottom: 0; }
  .portal-grade[data-de-baixo] > .porta-cartao:not([data-porta="intel"]) > .porta-cabeca { grid-area: cabeca; }
  /* no celular as portas de uma coluna so entram pela horizontal (o vao com o vizinho de baixo nao fecha), como as de sistema acima */
  .portal-grade[data-de-baixo] > [data-app] { --porta-de: translateX(-14px); }
}

/* A COR DE CADA UM (`--porta-marca`, figura, 3:1 ou mais; `--porta-texto`, texto, 4,5:1 ou mais), no claro e no escuro, pelo mesmo
   mecanismo de tema das folhas de assets/css/sistemas/ (a preferencia do aparelho e o botao de tema). Cartao claro: branco; escuro:
   #1c1c1c (--cinza-875). Razoes MEDIDAS com scratchpad/r138/contraste.mjs (luminancia relativa da WCAG 2.2).
   - Painel do RH, o verde do Trabalhe conosco (`--verde`, trabalhe-conosco/estilo.css).
     Claro: marca e texto #0c6c32, 6,55:1 no branco. Escuro: marca e texto #4cb872, 6,82:1 no cartao escuro.
   - App da auditoria, a tinta grafite do app (`--tinta`, auditoria/app.css).
     Claro: marca e texto #0e0e10, 19,28:1 no branco. Escuro: um cinza claro, #c9c9ce, 10,33:1 no cartao escuro.
   - Sistema Ceasa de teste, o verde do sistema da Ceasa (`--marca`, ceasa-sistema/DESIGN.md) e o ambar da fita de obra.
     Claro: marca e texto #166534, 7,13:1 no branco; fita #d97706, 3,19:1 no branco. Escuro: marca e texto #5ac887, 8,15:1 no
     cartao escuro; fita #f59e0b, 7,94:1 no cartao escuro. */
.porta-cartao[data-app="cartao-rh"] { --porta-marca: #0c6c32; --porta-texto: #0c6c32; }
.porta-cartao[data-app="cartao-auditoria"] { --porta-marca: #0e0e10; --porta-texto: #0e0e10; }
.porta-cartao[data-app="cartao-ceasateste"] { --porta-marca: #166534; --porta-texto: #166534; --porta-fita: #d97706; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) .porta-cartao[data-app="cartao-rh"] { --porta-marca: #4cb872; --porta-texto: #4cb872; }
  html:not([data-tema="claro"]) .porta-cartao[data-app="cartao-auditoria"] { --porta-marca: #c9c9ce; --porta-texto: #c9c9ce; }
  html:not([data-tema="claro"]) .porta-cartao[data-app="cartao-ceasateste"] { --porta-marca: #5ac887; --porta-texto: #5ac887; --porta-fita: #f59e0b; }
}
html[data-tema="escuro"] .porta-cartao[data-app="cartao-rh"] { --porta-marca: #4cb872; --porta-texto: #4cb872; }
html[data-tema="escuro"] .porta-cartao[data-app="cartao-auditoria"] { --porta-marca: #c9c9ce; --porta-texto: #c9c9ce; }
html[data-tema="escuro"] .porta-cartao[data-app="cartao-ceasateste"] { --porta-marca: #5ac887; --porta-texto: #5ac887; --porta-fita: #f59e0b; }

/* A MARCA DE TESTE, que ninguem confunde com a Nova Ceasa de verdade: uma PILULA CHEIA (elemento proprio, `porta-teste`, fora da etiqueta
   `porta-papel`, para sobreviver se a etiqueta sair do molde) e o filete do alto em listras diagonais, a fita de obra, no verde e no
   ambar. Pilula: fundo #b45309 com letra branca, 5,02:1 (texto); contra o cartao, 3,39:1 no escuro (figura). Mesma nos dois temas. */
.porta-teste {
  position: absolute;
  top: 18px;
  right: 16px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #b45309;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  pointer-events: none;
}
.porta-cartao[data-selo="teste"]::before {
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--porta-marca) 0 8px, var(--porta-fita) 8px 16px);
}
@media (max-width: 859.98px) {
  /* no cartao em linha (uma fileira so desde a juncao da r156) a seta fica no meio da altura, e a pilula no alto a cobria (8 dos 30 px
     do circulo, achado do critico da r156): o cartao de teste ganha uma faixa propria no alto, so para a pilula */
  .portal-grade[data-de-baixo] > .porta-cartao[data-selo="teste"]:not([data-porta="intel"]) { padding-top: 38px; }
  .portal-grade[data-de-baixo] > [data-selo="teste"] .porta-teste { top: 10px; right: 12px; }
}