/*
  Turing: identidade visual.
  O raciocínio está em Documentos/Contextos Otimizados para IA/IdentidadeVisualTuring.md
  e o guia vivo, em /Identidade. Nenhuma cor aparece fora dos tokens abaixo.
  Os blocos entre "tema:" e "fim:tema" são lidos por Services/PaletaIdentidade.cs
  e por Turing.Tests/IdentidadeVisualTests.cs: mantenha os marcadores.
*/

@font-face {
  font-family: "Old Standard TT";
  src: url("../fonts/old-standard-tt-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Old Standard TT";
  src: url("../fonts/old-standard-tt-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Old Standard TT";
  src: url("../fonts/old-standard-tt-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/cabin-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --fonte-titulo: "Old Standard TT", "Century Schoolbook", Georgia, serif;
  --fonte-texto: "Cabin", "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  --raio: 3px;
  --largura: 72rem;
}

/* tema:claro */
:root,
[data-tema="claro"] {
  --papel: #F1EBDD;
  --papel-2: #E7DFCD;
  --linha: #CFC5AE;
  --tinta: #1E1C19;
  --tinta-2: #5B554B;
  --esmalte: #4B665E;
  --sobre-esmalte: #F6F1E5;
  --ambar: #8C5607;
  --oxido: #9C3B2E;
  --fosforo: #276B4B;
  --faixa: #3C534C;
  --faixa-tinta: #F1EBDD;
  --faixa-linha: #5F7B72;
  --fita: #F8F3E7;
  --furo: #2A2622;
  --cabecote: #E3A23C;
  --dado: #4B665E;
}
/* fim:tema */

/* tema:escuro */
[data-tema="escuro"] {
  --papel: #1B1714;
  --papel-2: #26201B;
  --linha: #3A322A;
  --tinta: #EDE6D6;
  --tinta-2: #A79E8D;
  --esmalte: #7FA398;
  --sobre-esmalte: #14110F;
  --ambar: #E3A23C;
  --oxido: #D9705F;
  --fosforo: #6FCF97;
  --faixa: #241E19;
  --faixa-tinta: #EDE6D6;
  --faixa-linha: #4A4036;
  --fita: #D9CFB8;
  --furo: #1B1714;
  --cabecote: #E3A23C;
  --dado: #6F958A;
}
/* fim:tema */

/* Mesmos valores do bloco "tema:escuro"; o teste confere que os dois continuam iguais. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #1B1714;
    --papel-2: #26201B;
    --linha: #3A322A;
    --tinta: #EDE6D6;
    --tinta-2: #A79E8D;
    --esmalte: #7FA398;
    --sobre-esmalte: #14110F;
    --ambar: #E3A23C;
    --oxido: #D9705F;
    --fosforo: #6FCF97;
    --faixa: #241E19;
    --faixa-tinta: #EDE6D6;
    --faixa-linha: #4A4036;
    --fita: #D9CFB8;
    --furo: #1B1714;
    --cabecote: #E3A23C;
    --dado: #6F958A;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.1875rem;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--e4);
  top: -4rem;
  z-index: 10;
  padding: var(--e2) var(--e4);
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.pular:focus {
  top: var(--e2);
}

/* Rótulo de teleimpressor: caixa-alta monoespaçada e espaçada. */
.rotulo {
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.dado {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
}

/* ---------- Marca: fita perfurada ---------- */

.fita {
  display: block;
  height: auto;
}

.fita__papel {
  fill: var(--fita);
  stroke: var(--linha);
  stroke-width: 1;
}

.fita__furo {
  fill: var(--furo);
}

/* ---------- Painel superior ---------- */

.painel-superior {
  background: var(--faixa);
  color: var(--faixa-tinta);
  border-bottom: 1px solid var(--faixa-linha);
}

.painel-superior__dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e3) var(--e5);
  min-height: 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e6);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  color: inherit;
  text-decoration: none;
}

.marca .fita {
  width: 1.875rem;
}

.marca .fita__papel {
  stroke: none;
}

.marca__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Navegação "fita e cabeçote": os itens são células de uma fita; a página atual fica sob o cabeçote. */
.fita-nav {
  position: relative;
  --cabecote-x: 0px;
  --cabecote-l: 0px;
}

.fita-nav__lista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--fita);
  background-image: radial-gradient(circle, var(--furo) 0, var(--furo) 1px, transparent 1.4px);
  background-size: 0.625rem 0.375rem;
  background-position: 0.3125rem 100%;
  background-repeat: repeat-x;
  border-radius: 2px;
}

.fita-nav__celula + .fita-nav__celula {
  border-left: 1px solid var(--linha);
}

.fita-nav__celula a {
  display: block;
  padding: 0.4375rem 1.125rem 0.6875rem;
  font-family: var(--fonte-dado);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--furo);
}

.fita-nav__celula a[aria-current="page"] {
  font-weight: 500;
  box-shadow: inset 0 0 0 2px var(--cabecote);
}

.fita-nav[data-pronto] .fita-nav__celula a[aria-current="page"] {
  box-shadow: none;
}

.fita-nav__cabecote {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: var(--cabecote-x);
  width: var(--cabecote-l);
  border: 2px solid var(--cabecote);
  border-radius: var(--raio);
  pointer-events: none;
  opacity: 0;
  transition: left 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fita-nav__cabecote::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.4375rem;
  width: 0;
  height: 0;
  margin-left: -0.3125rem;
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid var(--cabecote);
}

.fita-nav[data-pronto] .fita-nav__cabecote {
  opacity: 1;
}

.operador {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e4);
  font-size: 0.9375rem;
}

.operador__nome {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operador form {
  margin: 0;
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.botao--principal {
  background: var(--esmalte);
  color: var(--sobre-esmalte);
}

.botao--principal:hover:not(:disabled) {
  filter: brightness(1.08);
}

.botao--discreto {
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  background: transparent;
  color: inherit;
  border-color: currentColor;
  font-weight: 400;
}

.botao--discreto:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.botao--largo {
  width: 100%;
}

.botao:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---------- Conteúdo ---------- */

.conteudo {
  flex: 1;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e7) var(--e5) var(--e8);
}

.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e6);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linha);
}

.cabecalho-pagina__texto {
  display: grid;
  gap: var(--e2);
}

.secao {
  margin-top: var(--e7);
}

.secao__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.texto {
  max-width: 44rem;
  color: var(--tinta);
}

.texto + .texto {
  margin-top: var(--e3);
}

.apoio {
  color: var(--tinta-2);
  font-size: 0.9375rem;
}

.etiqueta {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border: 1px dashed currentColor;
  border-radius: 2px;
  font-family: var(--fonte-dado);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar);
}

.aviso {
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--esmalte);
  background: var(--papel-2);
  border-radius: 0 var(--raio) var(--raio) 0;
}

.aviso--erro {
  border-left-color: var(--oxido);
}

.aviso--erro strong {
  color: var(--oxido);
}

.rodape {
  border-top: 1px solid var(--linha);
}

.rodape__dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e4) var(--e5);
}

/* ---------- Contadores: mostradores de algarismos ---------- */

.contadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-2);
}

.contador {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding: var(--e5);
}

.contador + .contador {
  border-left: 1px solid var(--linha);
}

.contador__valor {
  display: flex;
  gap: 3px;
}

.digito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 2.5rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 2px;
  font-family: var(--fonte-dado);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
}

.digito--sinal {
  width: 0.875rem;
  background: transparent;
  border-color: transparent;
}

.contador__nota {
  color: var(--tinta-2);
  font-size: 0.875rem;
}

/* ---------- Gráfico de barras ---------- */

.grafico {
  position: relative;
  padding: var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.grafico svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.grafico__barra {
  fill: var(--dado);
}

.grafico__alvo {
  fill: transparent;
  cursor: default;
}

.grafico__coluna:hover .grafico__barra,
.grafico__coluna:focus-visible .grafico__barra,
.grafico__coluna--ativa .grafico__barra {
  fill: var(--tinta);
}

.grafico__coluna:focus-visible {
  outline: none;
}

.grafico__coluna:focus-visible .grafico__alvo {
  stroke: var(--ambar);
  stroke-width: 2;
}

.grafico__base {
  stroke: var(--linha);
  stroke-width: 1;
}

.grafico__eixo,
.grafico__valor {
  font-family: var(--fonte-dado);
  font-size: 11px;
  fill: var(--tinta-2);
}

.grafico__valor {
  fill: var(--tinta);
  font-weight: 500;
}

.grafico__agora {
  fill: var(--tinta);
}

.dica {
  position: absolute;
  z-index: 2;
  left: var(--dica-x, 0);
  top: var(--dica-y, 0);
  transform: translate(-50%, -100%);
  padding: 0.25rem 0.5rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 2px;
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
}

.dica[hidden] {
  display: none;
}

.dica strong {
  font-weight: 500;
}

.tabela-dados {
  margin-top: var(--e4);
}

.tabela-dados summary {
  cursor: pointer;
  width: fit-content;
}

.tabela {
  width: 100%;
  margin-top: var(--e3);
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tabela th,
.tabela td {
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}

.tabela th {
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.tabela .num {
  text-align: right;
}

.tabela--estreita {
  max-width: 22rem;
}

/* ---------- Conversas: impresso de máquina ---------- */

.impresso {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linha);
}

.linha-conversa {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) 13rem;
  align-items: center;
  gap: var(--e2) var(--e5);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--linha);
}

.linha-conversa__hora {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

.linha-conversa__quem {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.linha-conversa__quem strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha-conversa__trecho {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-2);
}

/* Estado: forma e rótulo, nunca só a cor. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.estado__sinal {
  flex: none;
  width: 0.5625rem;
  height: 0.5625rem;
  background: currentColor;
}

.estado--respondida .estado__sinal {
  color: var(--fosforo);
  border-radius: 50%;
}

.estado--aguardando .estado__sinal {
  color: var(--ambar);
  transform: rotate(45deg);
}

.estado--atendimento .estado__sinal {
  color: var(--esmalte);
}

.estado--encerrada .estado__sinal {
  color: var(--tinta-2);
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 50%;
}

/* ---------- Acesso (login e erro) ---------- */

.acesso {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e5);
  padding: var(--e7) var(--e4);
}

.acesso__cartao {
  width: min(26rem, calc(100vw - 2rem));
  display: grid;
  gap: var(--e4);
  padding: var(--e6);
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.acesso__cartao .fita {
  width: 100%;
  margin-bottom: var(--e2);
}

.acesso__nome {
  font-size: 3rem;
  letter-spacing: 0.01em;
}

.acesso__cartao form {
  margin: var(--e2) 0 0;
}

/* ---------- Guia de identidade ---------- */

.guia__temas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5);
}

.tema-amostra {
  padding: var(--e5);
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.tema-amostra h3 {
  margin-bottom: var(--e4);
}

.amostras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amostra {
  display: grid;
  align-content: start;
  gap: var(--e1);
  font-size: 0.8125rem;
}

.amostra__cor {
  height: 3.25rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
}

.amostra__cor--papel { background: var(--papel); }
.amostra__cor--papel-2 { background: var(--papel-2); }
.amostra__cor--linha { background: var(--linha); }
.amostra__cor--tinta { background: var(--tinta); }
.amostra__cor--tinta-2 { background: var(--tinta-2); }
.amostra__cor--esmalte { background: var(--esmalte); }
.amostra__cor--sobre-esmalte { background: var(--sobre-esmalte); }
.amostra__cor--ambar { background: var(--ambar); }
.amostra__cor--oxido { background: var(--oxido); }
.amostra__cor--fosforo { background: var(--fosforo); }
.amostra__cor--faixa { background: var(--faixa); }
.amostra__cor--faixa-tinta { background: var(--faixa-tinta); }
.amostra__cor--faixa-linha { background: var(--faixa-linha); }
.amostra__cor--fita { background: var(--fita); }
.amostra__cor--furo { background: var(--furo); }
.amostra__cor--cabecote { background: var(--cabecote); }
.amostra__cor--dado { background: var(--dado); }

.amostra__uso {
  color: var(--tinta-2);
}

.guia__marca {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e6);
}

.guia__marca .fita {
  width: 100%;
}

.especime {
  display: grid;
  gap: var(--e2);
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--linha);
}

.especime__titulo {
  font-family: var(--fonte-titulo);
  font-size: 2.25rem;
  line-height: 1.1;
}

.especime__texto {
  font-family: var(--fonte-texto);
  font-size: 1.125rem;
}

.especime__dado {
  font-family: var(--fonte-dado);
  font-size: 1rem;
}

.guia__componentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e5);
  margin-bottom: var(--e5);
}

.guia__componente {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding: var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.guia__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.guia__regras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5);
}

.lista {
  margin: var(--e3) 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--e2);
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 56rem) {
  .contadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contador:nth-child(3) {
    border-left: 0;
  }

  .contador:nth-child(n + 3) {
    border-top: 1px solid var(--linha);
  }

  .linha-conversa {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .linha-conversa__trecho,
  .linha-conversa .estado {
    grid-column: 2;
  }

  .guia__temas,
  .guia__regras,
  .guia__marca {
    grid-template-columns: minmax(0, 1fr);
  }

  .guia__marca .fita {
    max-width: 9rem;
  }
}

@media (max-width: 34rem) {
  .painel-superior__dentro,
  .conteudo,
  .rodape__dentro {
    padding-left: var(--e4);
    padding-right: var(--e4);
  }

  .contadores {
    grid-template-columns: minmax(0, 1fr);
  }

  .contador + .contador {
    border-left: 0;
    border-top: 1px solid var(--linha);
  }

  .operador {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  /* O SVG encolhe com a tela; o texto do eixo cresce em unidades do desenho para continuar legível. */
  .grafico {
    padding: var(--e4);
  }

  .grafico__eixo,
  .grafico__valor {
    font-size: 17px;
  }

  .grafico__agora {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fita-nav__cabecote {
    transition: none;
  }
}

@media (forced-colors: active) {
  .estado__sinal,
  .digito,
  .grafico__barra {
    forced-color-adjust: auto;
  }

  .fita-nav__cabecote {
    border-color: Highlight;
  }
}