/* =============================================================================
   A ficha de ocorrencia.

   UMA TINTA, DUAS DENSIDADES. O azul da marca (#3496ae) mede 3,43:1 sobre papel branco -- passa
   em texto grande e REPROVA em texto pequeno. Isso nao e motivo para abandonar a cor: e motivo
   para trata-la como uma prensa trata uma tinta so. `--tinta` e a densidade cheia, que os rotulos
   e as reguas exigem para serem lidos; `--tinta-massa` e o tom, que so aparece como MASSA -- o
   corte -- onde o texto e grande o bastante para o contraste fechar.

   Sem cantos arredondados, sem sombra, sem textura de papel. O compromisso e com o SISTEMA da
   ficha -- posicao fixa, campo riscado, carimbo, via de arquivo -- e nunca com uma foto de papel.
   ============================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fontes/courier-prime-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fontes/courier-prime-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* O aparato impresso */
  --tinta:        #1d5c6b;   /* 7,51:1 sobre papel -- rotulos, reguas, carimbos */
  --tinta-fraca:  #5b8e9b;   /* reguas finas, que nao carregam texto */

  /* A MASSA DO CORTE. O azul exato da marca (#3496ae) fecha so 3,43:1 com branco: o motivo em
     34px passaria como texto grande, mas o rotulo acima dele -- pequeno e em caixa alta -- nao
     passava, e ele e o que diz ao atendente o que aquela massa significa.
     #2a7a90 fecha 4,90:1: mesma familia, um passo de densidade a mais. A identidade e branco e
     azul, e nao um hexadecimal num lugar; o piso de contraste nao se negocia contra uma cor. */
  --tinta-massa:  #2a7a90;

  /* O que aconteceu */
  --papel:        #ffffff;
  --conteudo:     #1a1a1a;   /* 17,4:1 */
  --conteudo-fraco:#5a5347;  /* 6,7:1 sobre o papel */
  --alerta:       #b3352a;   /* 6,07:1 -- so alerta de verdade */

  --papel-atual:  var(--papel);

  /* A GRADE. A camada tecnologica da superficie, e nao um enfeite.
     Decisao do dono do produto em 2026-09-07: "deveria haver um background sutil e tecnologico do
     que uma pagina estatica que parece um PDF impresso". Ele tem razao -- a ficha le como
     documento de proposito, e um painel de monitoramento nao e um documento.
     E a prima TECNICA da folha pautada, nao o oposto dela: mesma tinta, mesma ortogonalidade,
     celula de 32px alinhada ao ritmo de 4px do resto da folha.
     SVG desenhado, e nao `repeating-linear-gradient`: listra de gradiente e assinatura de
     interface gerada, e o detector a pega por nome.
     9% de tinta. Medido: o texto sobre uma linha da grade cai de 17,4:1 para 15,7:1 -- tres vezes
     acima do piso, e a linha tem 1px, entao a maior parte de cada letra pousa em papel limpo. */
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%231d5c6b' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");

  /* A cor que se le EM CIMA da tinta cheia, quando ela e fundo.
     De dia a tinta e escura e o texto e branco; a noite ela e clara e aceso, e branco sobre ela
     media 1,74:1 -- no canhoto aberto, que e o unico item do talao que diz qual ficha esta na
     tela, durante metade do dia de operacao. Nenhum detector ve isso: as duas cores sao literais
     declarados em regras diferentes. */
  --sobre-tinta:  #ffffff;

  --serifado: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --datilo:   'Courier Prime', 'Courier New', ui-monospace, monospace;

  --regua: 1px solid var(--tinta-fraca);
  --regua-forte: 1px solid var(--tinta);

  /* Um passo de espaco so, para a folha inteira ter um ritmo. */
  --u: 4px;

  color-scheme: light;
}

/* A MESMA CHAPA NA MESA DE LUZ.
   Nao e dark mode generico: e o mesmo documento sob outra luz, com as mesmas posicoes e a mesma
   hierarquia. O aparato deixa de ser IMPRESSO e passa a ser ACESO. Segue o relogio e nao o tema
   do sistema, porque o que muda e a luz da sala. */
[data-rendicao="noite"] {
  --tinta:        #7fd0e4;   /* 10,1:1 sobre o fundo */
  --tinta-fraca:  #3d6b78;
  --tinta-massa:  #23708a;   /* na mesa de luz a massa escurece: o branco sobre ela precisa
                                fechar 4,5:1, e o tom do dia so fecharia 3,4:1 */
  --papel:        #101a1e;
  /* AQUI VIVIA `--papel-arquivo: #524218`, e ele foi a pior escolha desta folha.
     Eu tinha perseguido um tom que se VISSE contra o papel escuro -- tentei #1d2519 e #2a2214,
     ambos invisiveis -- e parei em 1,81:1 achando que tinha resolvido. O que eu nao medi foi a
     FREQUENCIA: sem ligacao nova, toda ficha passa dos 15 minutos, e aquele oliva cobria a chapa
     inteira o tempo todo. Otimizei o contraste de um estado que eu tratava como excecao e que na
     verdade era o padrao. */
  --conteudo:     #e8eef0;   /* 15,1:1 */
  --conteudo-fraco:#a8b6bb;  /* 8,5:1 */
  --alerta:       #ff8a7a;
  --sobre-tinta:  #101a1e;   /* 10,13:1 -- na mesa de luz o bloco aceso leva texto escuro */
  /* Na mesa de luz a grade tambem acende. Mais fraca que de dia: sobre fundo escuro a mesma
     opacidade grita, e a sala esta com pouca luz. */
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%237fd0e4' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* O `hidden` do navegador e so `display: none` na folha de estilo do agente, e QUALQUER `display`
   do autor o vence. Sem esta linha, `.repouso { display: flex }` fazia o estado de repouso nunca
   sumir -- e como ele esta fixado em `grid-column: 2`, empurrava a folha para a linha de baixo do
   grid, espremida contra o talao. A pagina inteira parecia quebrada por causa de uma
   especificidade. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--papel);
  color: var(--conteudo);
  font-family: var(--serifado);
  font-size: 15px;
  line-height: 1.45;
  /* O overscan de TV nao alcanca este monitor, mas a moldura da tela cheia alcanca. */
  overflow: hidden;
}

/* As superficies que o navegador desenha tambem sao da ficha. */
::selection { background: var(--tinta-massa); color: #ffffff; }
:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}
* { scrollbar-width: thin; scrollbar-color: var(--tinta-fraca) transparent; }
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--tinta-fraca); border: 3px solid var(--papel); }

/* =============================================================================
   A moldura
   ============================================================================= */

.painel {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  height: 100vh;
}

/* =============================================================================
   O talao: os canhotos das fichas anteriores
   ============================================================================= */

.talao {
  border-right: var(--regua-forte);
  padding: calc(var(--u) * 4) 0 0;
  overflow-y: auto;
  background: var(--grade), var(--papel);
}

.talao__titulo {
  margin: 0 calc(var(--u) * 4) calc(var(--u) * 3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* A VOLTA AO AUTOMATICO.
   Mesma caixa de duas reguas do carimbo de idade, porque e da mesma familia: as duas dizem em que
   TEMPO a folha esta. So aparece quando o operador escolheu um anterior -- fora disso a tela ja
   assume sozinha, e um botao permanente para desfazer o que ninguem fez e ruido em oito horas de
   plantao. */
/* 40px porque e o que o botao MEDE, e nao o que ele parecia medir: na coluna de 200px do monitor
   real o rotulo quebra em duas linhas. Com os 30px que eu tinha estimado, a lista descia 10px no
   instante do clique -- o canhoto seguinte saia debaixo do cursor de quem acabou de mirar. */
.talao__acao {
  display: flex;
  min-height: 40px;
  margin: 0 calc(var(--u) * 4) calc(var(--u) * 3);
}
.talao__voltar {
  margin: 0;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  border: 2px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.talao__voltar:hover { background: var(--tinta); color: var(--sobre-tinta); }

.talao__lista { margin: 0; padding: 0; list-style: none; }

/* A hora EM CIMA do desfecho, e nao ao lado.
   Lado a lado, num talao de 200px, "Resolvida pela Pati" truncava em "Resolvida pe..." -- e a
   lista existe justamente para o atendente ESCOLHER. "Desfecho in..." nao distingue
   "indeterminado" de "nao registrado", que sao coisas diferentes. */
/* BOTAO DE VERDADE, e nao um `li` com `onclick`.
   O talao e a unica navegacao da tela; com `div` clicavel ele sai do alcance do teclado e nao se
   anuncia como escolha para leitor nenhum. O reset abaixo existe so para o botao voltar a parecer
   o canhoto que ele sempre foi. */
.canhoto {
  display: grid;
  width: 100%;
  gap: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 4);
  border: 0;
  border-top: var(--regua);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.canhoto:last-child { border-bottom: var(--regua); }

/* O AFFORDANCE SAI DA PROPRIA FICHA: a regua de cima engrossa de tom e a hora sobe para a tinta
   cheia. Sem faixa cinza de linha, que e o hover generico de tabela e nao diz nada aqui; sem
   mudanca de peso, que reflui o texto debaixo do cursor. */
.canhoto:hover { border-top-color: var(--tinta); }
.canhoto:hover .canhoto__hora { color: var(--tinta); }
/* Para dentro: com `outline-offset: 2px` o foco era cortado pela borda do talao, que rola. */
.canhoto:focus-visible { outline-offset: -2px; }

.canhoto__hora {
  font-family: var(--datilo);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo-fraco);
}

.canhoto__desfecho {
  font-size: 13px;
  line-height: 1.25;
  color: var(--conteudo);
}

/* QUAL FICHA ESTA NA TELA. A ficha diz isso com a tinta, e nao com um badge.
   Enquanto o talao nao clicava, este era tambem o marcador do mais recente -- eles eram sempre o
   mesmo canhoto. Com o ticket 04 deixam de ser, e passam a ser duas informacoes diferentes. */
.canhoto--aberto {
  background: var(--tinta);
  border-top-color: var(--tinta);
}
.canhoto--aberto .canhoto__hora,
.canhoto--aberto .canhoto__desfecho { color: var(--sobre-tinta); }
.canhoto--aberto:hover .canhoto__hora { color: var(--sobre-tinta); }

/* QUAL E O MAIS RECENTE, quando nao e o que esta aberto.
   O rotulo NAO aparece no estado normal, e isso e decisao: ali o mais recente ja e o canhoto
   cheio de tinta no topo da pilha, e um rotulo repetindo o que a posicao e a cor ja dizem e o
   movimento sem motivo que o PRODUCT.md proibe. Ele aparece exatamente quando informa: o operador
   saiu do topo, e a tela precisa dizer onde o topo ficou. */
.canhoto__atual {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* O QUE CHEGOU ENQUANTO ELE LIA OUTRO.
   Avisa, e nao interrompe: regua de alerta na lateral e um rotulo que diz o que aconteceu. Nada
   pisca -- sao oito horas de plantao olhando esta tela, e o que pisca precisa ter motivo. */
/* SEM regua colorida na lateral. Ela era `border-left: 3px solid` -- o item que o piso de
   qualidade proibe por nome e chama de "o tell mais reconhecivel de UI gerada por IA". Eu peguei
   o padrao em vez da lingua da ficha. O rotulo carimbado abaixo ja diz tudo, e numa coluna
   estreita ele e inconfundivel. */
.canhoto__novo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alerta);
}

.talao__vazio {
  margin: calc(var(--u) * 4);
  font-size: 12px;
  color: var(--conteudo-fraco);
}

/* =============================================================================
   A folha
   ============================================================================= */

/* A FOLHA NAO TEM IMAGEM DE FUNDO, e isso e decisao.
   Em 2026-09-07 a Pati chegou a ocupar a metade de baixo da folha como protagonista da pagina, a
   pedido do dono do produto -- e ele voltou atras no mesmo dia, pedindo foco no objetivo do
   negocio e nao no estetico. O objetivo e um: o atendente entende a ligacao em tres segundos,
   com o telefone tocando.
   Fica registrado o que a tentativa custou, para nao ser refeita sem saber: com ela ali, as
   linhas de 15s e 30s da transcricao caiam sobre o painel holografico e perdiam contraste. Foi
   preciso esmaecer a imagem exatamente na zona onde o texto vive -- ou seja, apaga-la onde ela
   apareceria. */
.folha {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
  /* A grade fica na MESMA pilha de fundo do papel, e nao num pseudo-elemento: fundo de elemento
     pinta atras do conteudo por definicao. Foi assim que a Pati cobriu o texto quando tentei com
     `::after` e `z-index`. */
  /* Tres camadas, de cima para baixo: a regua da conversa, a grade tecnica, o papel.
     A regua e desenhada em JS a partir dos turnos do atendimento aberto -- ela E o dado, e nao
     enfeite sobre ele. Fica ancorada na base, na largura toda, com 60px de altura: a area onde a
     folha vive vazia em praticamente todo atendimento. */
  background:
    /* Levantada 40px: ancorada na base ela caia ATRAS do rodape e sumia pela metade. */
    var(--fundo-conversa, none) left bottom 40px / 100% 96px no-repeat,
    var(--grade),
    var(--papel-atual);
  transition: background-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* A FOLHA NAO TROCA MAIS DE PAPEL, e isso e correcao de uma ideia minha que so parecia boa.
   Ela era canario de dia e um oliva escuro de noite, na chapa inteira, passados 15 minutos. O
   dono do produto viu a versao de noite com dado real e disse "que horrivel essa tela amarela".
   Ele tem razao, e o argumento tecnico concorda com o dele: SEM LIGACAO NOVA, TODA FICHA PASSA DOS
   15 MINUTOS -- entao a cor de excecao virou o estado permanente da tela. Cor de excecao sempre
   ligada nao e sinal, e fundo; e o proprio PRODUCT.md diz que o que nao tem motivo nao pisca.
   O mecanismo continua, no lugar onde o atendente ja procura "isto e de agora?": o carimbo, que
   diz `VIA DE ARQUIVO` com todas as letras e rebaixa a propria cor. Palavra, e nao tinta na chapa
   inteira. */

.cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 3) calc(var(--u) * 7);
  border-bottom: var(--regua-forte);
}

.cabecalho__marca { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.cabecalho__logo { width: 30px; height: auto; }

/* A FOTO NA CAIXA DE IDENTIFICACAO.
   Moldura de uma regua so, sem canto arredondado e sem sombra: e a foto colada na ficha, nao um
   avatar de aplicativo. O nome sai na tipografia do formulario, e nao no cracha da imagem --
   a 44px o cracha do render seria borrao, e o rotulo impresso se le. */
.cracha {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding-right: calc(var(--u) * 3);
  border-right: var(--regua);
}
.cracha__foto {
  width: 40px;
  height: 50px;
  object-fit: cover;
  object-position: 50% 20%;
  border: var(--regua-forte);
  background: var(--papel);
}
.cracha__nome {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--conteudo);
  display: grid;
}
.cracha__cargo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
}

.cabecalho__produto {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta);
}
.cabecalho__orgao {
  margin: 0;
  font-size: 12px;
  color: var(--conteudo-fraco);
}

/* O carimbo de idade */
.carimbo {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u)) calc(var(--u) * 2.5);
  border: 2px solid var(--tinta);
  color: var(--tinta);
}
/* A IDADE EM ESCALA DE DISPLAY.
   A 17px ela empatava com os valores de ORIGEM e HORA ao lado, e o mecanismo de envelhecimento
   virava uma coisa para procurar. A pergunta que este carimbo responde -- "isto e de agora?" --
   e a segunda que o atendente faz, depois de "por que ela desistiu", e so o corte vem antes. */
.carimbo__idade {
  font-family: var(--datilo);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.carimbo__via {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.folha[data-via="arquivo"] .carimbo {
  border-color: var(--conteudo-fraco);
  color: var(--conteudo-fraco);
}

/* QUATRO ESTADOS, com formas distintas -- nao um ponto trocando de cor. */
.sinal {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--conteudo-fraco);
}
.sinal__marca {
  width: 11px; height: 11px;
  border: 2px solid currentColor;
}
/* Quadrado CHEIO, e nao um circulo verde.
   O circulo era o unico canto arredondado de uma folha cujo mundo diz "sem cantos arredondados",
   e verde era uma cor que a paleta nunca declarou. Bolinha verde de status e exatamente o token
   de dashboard de call center que esta tela recusa -- as quatro marcas sao ortogonais e saem da
   mesma tinta: cheia, losango, pontilhada, riscada. */
.sinal[data-estado="no-ar"]      { color: var(--tinta); }
.sinal[data-estado="no-ar"] .sinal__marca { background: currentColor; }

.sinal[data-estado="carregando"] .sinal__marca { border-style: dotted; }

.sinal[data-estado="sem-dados"]  { color: var(--alerta); }
.sinal[data-estado="sem-dados"] .sinal__marca { transform: rotate(45deg); background: currentColor; }

/* Fora do horario a marca e um quadrado RISCADO -- a mesma lingua do campo sem dado, que a folha
   ja usa. Era uma faixa de `repeating-linear-gradient`, que e assinatura de interface gerada e
   nao dizia nada; o risco diz, e diz com o vocabulario da propria ficha. */
.sinal[data-estado="fora-do-horario"] { color: var(--tinta); }
.sinal[data-estado="fora-do-horario"] .sinal__marca {
  position: relative;
}
.sinal[data-estado="fora-do-horario"] .sinal__marca::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: 50%;
  border-top: 2px solid currentColor;
}

/* Os campos, em posicao FIXA */
.campos {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr));
  border-bottom: var(--regua-forte);
}

.campo {
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-left: var(--regua);
  min-height: 76px;
}
.campo:first-child { border-left: 0; padding-left: calc(var(--u) * 7); }

.campo__rotulo {
  margin: 0 0 calc(var(--u) * 1.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* A NUMERACAO DE CAMPO.
   Ela e um dos quatro aparatos que o mundo desta ficha declara, e eu a tinha abandonado em
   silencio -- achando que numero de secao era decoracao. Aqui nao e: e o que faz o rotulo do
   corte ler como CAMPO 6 da gramatica rotulo/valor do proprio formulario, em vez de uma sobrancelha
   acima de um titulo. E e o que permite ao atendente parar de ler rotulo: ele aprende que o
   desfecho e o 5.

   SEM `opacity`: o numero se distingue do rotulo pela FONTE -- datilografada, peso normal, sem
   espacejamento -- e nao por transparencia. Rebaixar com opacidade e o que acabou de reprovar o
   rotulo do corte em 4,03:1 sem nenhuma ferramenta acusar, e ele herda a cor da massa azul aqui
   tambem. */
.campo__n {
  display: inline-block;
  margin-right: 0.7em;
  font-family: var(--datilo);
  font-weight: 400;
  letter-spacing: 0;
}

.campo__valor {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  color: var(--conteudo);
}
.campo__valor--codificado {
  font-family: var(--datilo);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* CAMPO RISCADO. Branco e riscado nunca foram a mesma coisa em papel: "nao houve" e "nao sei"
   sao respostas diferentes, e a ficha ja sabia disso antes de existir tela. */
.campo__valor[data-riscado="sim"],
.corte__motivo[data-riscado="sim"] {
  color: transparent;
  position: relative;
  user-select: none;
}
.campo__valor[data-riscado="sim"]::after,
.corte__motivo[data-riscado="sim"]::after {
  content: "";
  position: absolute;
  left: 0; right: 30%;
  top: 0.55em;
  border-top: 2px solid var(--conteudo-fraco);
}

/* O CORTE */
.corte {
  padding: calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * 5);
  background: var(--tinta-massa);
  border-bottom: var(--regua-forte);
}
/* Branco PURO, sem opacidade.
   `#ffffff` a 85% sobre #2a7a90 mistura para #dfebee, que fecha 4,03:1 -- abaixo do piso, num
   rotulo de 11px em caixa alta. O detector nao ve isso: ele le a cor declarada, e a cor declarada
   era branco. Opacidade e a forma mais facil de reprovar em contraste sem nenhuma ferramenta
   acusar. */
.corte__rotulo {
  margin: 0 0 calc(var(--u) * 2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
}
.corte__motivo {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
}

/* A folha de continuacao -- unico trecho que rola */
.continuacao {
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * 6);
}
.continuacao__rotulo {
  margin: 0 0 calc(var(--u) * 3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

.turnos { margin: 0; padding: 0; list-style: none; }

/* CADA TURNO CARREGA SEU TEMPO, alinhado a direita contra a regua.
   E o que faz um silencio de 40 segundos virar buraco visivel numa coluna de numeros, em vez de
   uma frase que precisa ser lida. */
/* A REGUA VAI ATE O FIM DA FOLHA; O TEXTO E QUE TEM MEDIDA.
   Antes o `max-width` estava na linha inteira, entao as reguas paravam no meio da chapa e se liam
   como sublinhados interrompidos -- ao 1920, contra uma faixa de campos e um corte que ocupam a
   largura toda, a folha ficava com duas medidas se contradizendo. Numa ficha a linha pautada
   atravessa a folha; quem tem medida e o que se escreve em cima dela. */
.turno {
  display: grid;
  grid-template-columns: 46px 96px minmax(0, 1fr);
  gap: 0 calc(var(--u) * 3);
  padding: calc(var(--u) * 2) 0;
  border-top: var(--regua);
}
.turno:last-child { border-bottom: var(--regua); }

.turno__tempo {
  font-family: var(--datilo);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--tinta);
  padding-top: 0.15em;
}
.turno__quem {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--conteudo-fraco);
  padding-top: 0.35em;
}
/* A MEDIDA VIVE AQUI, na fonte em que o texto e escrito.
   `ch` resolve contra a fonte do PROPRIO elemento. Com o limite na linha inteira, 74ch eram
   contados em Archivo e o texto sai em Courier Prime, que tem o `0` bem mais largo: a medida real
   caia para ~54 caracteres, abaixo do piso de 65. Medir na fonte errada da um numero que parece
   certo. */
.turno__fala {
  font-family: var(--datilo);
  font-size: 14px;
  line-height: 1.5;
  color: var(--conteudo);
  max-width: 68ch;
}
.turno--pati .turno__fala { color: var(--conteudo-fraco); }

/* O INTERVALO EM QUE NINGUEM FALOU. Nao e enfeite: e o dado.
   Linha PROPRIA entre dois turnos, e nao um rodape do turno de baixo -- pendurado no fim de uma
   fala, ele se lia como se o silencio viesse DEPOIS dela, quando ele veio antes. */
.intervalo {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 calc(var(--u) * 3);
  padding: calc(var(--u) * 1.5) 0;
  border-top: var(--regua);
}
.intervalo__marca {
  border-top: 2px solid var(--alerta);
  margin-top: 0.55em;
}
.intervalo__texto {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alerta);
}

/* O ESTADO SEM CONVERSA RECEBE O MESMO TRATAMENTO DOS TURNOS.
   Ele tinha ficado para tras nas correcoes das reguas e da medida: continuava com o limite
   contado em Archivo enquanto o texto sai em Courier, e com as reguas parando no meio da chapa.
   Os dois defeitos que eu tinha acabado de consertar sobreviviam intactos no estado irmao -- e e
   justamente o estado que o ticket 02 nomeia com todas as letras ("sem transcricao, mostra motivo
   e resumo"). Conserto que so alcanca o caminho feliz nao e conserto. */
.continuacao__nada {
  margin: 0;
  padding: calc(var(--u) * 3) 0;
  border-top: var(--regua);
  border-bottom: var(--regua);
}
.continuacao__nada-texto {
  display: block;
  font-family: var(--datilo);
  font-size: 14px;
  line-height: 1.5;
  color: var(--conteudo-fraco);
  max-width: 68ch;
}

/* O rodape */
.rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) calc(var(--u) * 7);
  border-top: var(--regua-forte);
}
.rodape__gravacao {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.rodape__gravacao:hover { text-decoration-thickness: 2px; }
.rodape__grupo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
}
.rodape__sem-gravacao,
.rodape__id {
  font-size: 12px;
  color: var(--conteudo-fraco);
}
/* O prazo da assinatura. Datilografado e tabular como todo numero desta folha. */
.rodape__prazo {
  font-family: var(--datilo);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo-fraco);
}
/* Menos de cinco minutos e a unica coisa do rodape que vira alerta: e a janela fechando. */
.rodape__prazo[data-urgente="sim"] {
  color: var(--alerta);
  font-weight: 700;
}
.rodape__id { font-family: var(--datilo); }

/* O aviso da tecla sem descoberta. Some sozinho em 4s. */
.rodape__aviso {
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta);
}

/* =============================================================================
   O repouso: a ficha em branco
   ============================================================================= */

/* A ficha em branco continua sendo uma FICHA: a grade fica, porque o papel do talao e da folha
   tem grade e este e o mesmo papel. Sem ela a tela virava um vazio branco, que e outra coisa. */
.repouso {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 10);
  text-align: center;
  background: var(--grade), var(--papel-atual);
}
/* O ESTADO VEM CARIMBADO, e nao ilustrado.
   Aqui vivia o retrato da Pati em `min(42vh, 400px)`, e o dono do produto o viu e disse "ficou
   pessimo, ta feio" -- um render fotografico centrado numa pagina que e um formulario. O carimbo
   e a mesma caixa de duas reguas do carimbo de idade: e a lingua que a ficha ja fala para dizer
   em que estado ela esta. */
.repouso__titulo {
  margin: 0;
  padding: calc(var(--u) * 3) calc(var(--u) * 6);
  border: 2px solid var(--tinta);
  font-size: 21px;
  font-weight: 700;
  color: var(--tinta);
}
.repouso__detalhe {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  color: var(--conteudo-fraco);
}

.sem-script {
  margin: calc(var(--u) * 8);
  font-size: 15px;
  color: var(--alerta);
}

/* =============================================================================
   O piso de 1366x768, que e o monitor real
   ============================================================================= */

@media (max-width: 1500px) {
  .painel { grid-template-columns: 200px minmax(0, 1fr); }
  .corte__motivo { font-size: 28px; }
  .campo__valor { font-size: 17px; }
  .campo { min-height: 68px; padding: calc(var(--u) * 2.5) calc(var(--u) * 3); }
  .campo:first-child { padding-left: calc(var(--u) * 5); }
  .cabecalho, .corte, .continuacao, .rodape { padding-left: calc(var(--u) * 5); padding-right: calc(var(--u) * 5); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}