/* ============================================================
   SOAS - Componentes
   Depende de soas-tokens.css. Nenhum valor cru fora dos tokens.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-interface);
  font-size: var(--t-base);
  line-height: var(--altura-normal);
  font-feature-settings: "cv05" 1;
  -webkit-font-smoothing: antialiased;
}

/* Fundo de papel milimetrado, bem baixo, só para dar matéria à tela */
.trama {
  background-image:
    linear-gradient(var(--borda-fraca) var(--fio), transparent var(--fio)),
    linear-gradient(90deg, var(--borda-fraca) var(--fio), transparent var(--fio));
  background-size: 32px 32px, 32px 32px;
  background-position: -1px -1px;
}

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--anel-recuo) var(--fundo),
    0 0 0 calc(var(--anel-recuo) + var(--anel-largura)) var(--anel-foco);
  border-radius: var(--raio-1);
}

/* ---------- Tipografia de apoio ---------- */

.rotulo-maquina {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina);
  text-transform: uppercase;
  color: var(--texto-3);
  margin: 0;
}

.titulo-secao {
  font-family: var(--fonte-documento);
  font-size: var(--t-xl);
  font-weight: var(--peso-medio);
  line-height: var(--altura-apertada);
  letter-spacing: -0.01em;
  margin: 0 0 var(--e-2);
}

.titulo-bloco {
  font-family: var(--fonte-documento);
  font-size: var(--t-lg);
  font-weight: var(--peso-medio);
  line-height: var(--altura-apertada);
  margin: 0;
}

.prosa { max-width: var(--largura-leitura); color: var(--texto-2); margin: 0; }
.prosa + .prosa { margin-top: var(--e-3); }

/* ---------- Selo de aferição ---------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 2px var(--e-2);
  border: var(--fio) solid var(--selo-borda);
  border-radius: var(--raio-1);
  background: var(--selo-fundo);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.04em;
  color: var(--selo-texto);
  white-space: nowrap;
}
.selo__ponto {
  width: 6px; height: 6px; border-radius: var(--raio-pilula);
  background: currentColor; flex: none;
}
.selo--aferido { color: var(--aferido); border-color: var(--aferido-borda); }
.selo--ressalva { color: var(--ressalva); border-color: var(--ressalva-borda); }
.selo--recusa { color: var(--acento-texto); border-color: var(--acento-borda); }
.selo--falha { color: var(--falha); border-color: var(--falha-borda); }

/* ---------- Bloco de número (o dado aferido) ----------
   Anatomia obrigatória: rótulo, valor, denominador, janela, ressalva, selo.
   Nenhuma parte é opcional a não ser a ressalva. */

.dado {
  position: relative;
  background: var(--numero-fundo);
  border: var(--fio) solid var(--numero-borda);
  border-left: var(--regua) solid var(--numero-regua);
  border-radius: var(--raio-2);
  padding: var(--numero-padding);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.dado__rotulo {
  font-size: var(--t-sm);
  color: var(--numero-rotulo);
  font-weight: var(--peso-medio);
  margin: 0;
}
.dado__valor {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xl);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-numero);
  line-height: 1;
  color: var(--numero-valor);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}
.dado__valor--destaque { font-size: var(--t-3xl); }
.dado__unidade { font-size: var(--t-lg); color: var(--texto-2); font-weight: var(--peso-normal); }
.dado__denominador {
  font-family: var(--fonte-dado);
  font-size: var(--t-xs);
  color: var(--numero-denominador);
  margin: 0;
}
.dado__janela {
  font-family: var(--fonte-dado);
  font-size: var(--t-xs);
  color: var(--numero-janela);
  margin: 0;
}
.dado__ressalva {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  margin: var(--e-1) 0 0;
  padding: var(--e-2) var(--e-3);
  background: var(--ressalva-fundo);
  border-left: 2px solid var(--ressalva-borda);
  border-radius: var(--raio-1);
  font-size: var(--t-sm);
  color: var(--texto);
}
.dado__rodape {
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center;
  margin-top: var(--e-1);
}
.dado--ressalva { --numero-regua: var(--ressalva); }
.dado--comparacao { --numero-regua: var(--acento); }

/* Par obrigatório: exposição sempre ao lado da carga */
.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fio);
  background: var(--borda-fraca);
  border: var(--fio) solid var(--numero-borda);
  border-left: var(--regua) solid var(--numero-regua, var(--aferido));
  border-radius: var(--raio-2);
  overflow: hidden;
}
.par .dado { border: 0; border-radius: 0; }
.par__nota {
  grid-column: 1 / -1;
  background: var(--superficie);
  padding: var(--e-3) var(--e-5);
  font-size: var(--t-sm);
  color: var(--texto-2);
}
@media (max-width: 560px) { .par { grid-template-columns: 1fr; } }

/* ---------- Ficha de procedência ---------- */

.procedencia { margin-top: var(--e-2); }
.procedencia__abrir {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina);
  text-transform: uppercase;
  color: var(--acento-texto);
  cursor: pointer;
  list-style: none;
  padding: var(--e-1) 0;
}
.procedencia__abrir::-webkit-details-marker { display: none; }
.procedencia__abrir::before { content: "+ "; }
.procedencia[open] .procedencia__abrir::before { content: "- "; }
.procedencia__corpo {
  margin-top: var(--e-2);
  border-top: var(--fio) dashed var(--borda);
  padding-top: var(--e-2);
  font-family: var(--fonte-dado);
  font-size: var(--t-xs);
  color: var(--texto-2);
  display: grid;
  gap: var(--e-1);
}
.procedencia__linha { display: flex; gap: var(--e-3); }
.procedencia__chave { color: var(--texto-3); min-width: 13ch; }

/* ---------- Recusa: a peça principal ---------- */

.recusa {
  position: relative;
  background: var(--recusa-fundo);
  border: var(--fio) solid var(--recusa-borda);
  border-left: var(--regua) solid var(--recusa-regua);
  border-radius: var(--raio-2);
  overflow: hidden;
}
.recusa__lacuna {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: center;
  padding: var(--e-4) var(--e-5);
  background-color: var(--hachura-fundo);
  background-image: var(--hachura);
  border-bottom: var(--fio) solid var(--recusa-borda);
}
.recusa__lacuna-texto {
  font-family: var(--fonte-dado);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-maquina);
  text-transform: uppercase;
  color: var(--acento-texto);
  background: var(--recusa-fundo);
  padding: var(--e-1) var(--e-2);
  border: var(--fio) solid var(--recusa-borda);
  border-radius: var(--raio-1);
}
.recusa__corpo { padding: var(--e-5); display: grid; gap: var(--e-4); }
.recusa__titulo {
  font-family: var(--fonte-documento);
  font-size: var(--t-lg);
  font-weight: var(--peso-medio);
  color: var(--recusa-titulo);
  margin: 0;
  line-height: var(--altura-apertada);
}
.recusa__linhas { display: grid; gap: var(--e-3); margin: 0; }
.recusa__item { display: grid; grid-template-columns: 13ch 1fr; gap: var(--e-4); }
.recusa__chave {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina);
  text-transform: uppercase;
  color: var(--texto-3);
  padding-top: 3px;
}
.recusa__valor { color: var(--recusa-texto); margin: 0; }
.recusa__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.recusa__rodape {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  align-items: center; justify-content: space-between;
  border-top: var(--fio) dashed var(--recusa-borda);
  padding-top: var(--e-3);
}
@media (max-width: 560px) {
  .recusa__item { grid-template-columns: 1fr; gap: var(--e-1); }
}

/* Recusa compacta, para linha de tabela e lista de dias */
.recusa-compacta {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background-color: var(--hachura-fundo);
  background-image: var(--hachura);
  border: var(--fio) solid var(--recusa-borda);
  border-radius: var(--raio-1);
  font-size: var(--t-sm);
}
.recusa-compacta__etiqueta {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina);
  text-transform: uppercase;
  color: var(--acento-texto);
  background: var(--recusa-fundo);
  padding: 1px var(--e-2);
  border-radius: var(--raio-1);
  white-space: nowrap;
}

/* Agrupador de causa: várias recusas com o mesmo motivo viram um bloco só */
.causa {
  border: var(--fio) solid var(--acento-borda);
  border-radius: var(--raio-2);
  background: var(--superficie);
  overflow: hidden;
}
.causa__topo {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  align-items: baseline; justify-content: space-between;
  padding: var(--e-4) var(--e-5);
  background-color: var(--hachura-fundo);
  background-image: var(--hachura);
  border-bottom: var(--fio) solid var(--acento-borda);
}
.causa__contagem {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xl);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-numero);
  color: var(--acento-texto);
  line-height: 1;
}
.causa__corpo { padding: var(--e-4) var(--e-5); display: grid; gap: var(--e-3); }
.causa__dias { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.dia-recusado {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  padding: 2px var(--e-2);
  border: var(--fio) solid var(--borda);
  border-radius: var(--raio-1);
  color: var(--texto-2);
  background-image: var(--hachura);
}

/* ---------- Amostra insuficiente ---------- */

.amostra {
  background: var(--amostra-fundo);
  border: var(--fio) solid var(--amostra-borda);
  border-left: var(--regua) solid var(--amostra-regua);
  border-radius: var(--raio-2);
  padding: var(--e-5);
  display: grid;
  gap: var(--e-3);
}
.amostra__titulo {
  font-family: var(--fonte-documento);
  font-size: var(--t-lg);
  font-weight: var(--peso-medio);
  margin: 0;
  color: var(--texto);
  line-height: var(--altura-apertada);
}
.amostra__contagem {
  font-family: var(--fonte-dado);
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-numero);
  color: var(--texto);
}
.amostra__contagem span { color: var(--texto-3); font-size: var(--t-md); }
.amostra__trilho {
  position: relative;
  height: 12px;
  background: var(--amostra-trilho);
  border-radius: var(--raio-1);
  overflow: hidden;
}
.amostra__preenchido {
  position: absolute; inset: 0 auto 0 0;
  background: var(--amostra-preenchido);
}
.amostra__vazio {
  position: absolute; inset: 0 0 0 auto;
  background-image: var(--hachura);
}
.amostra__marca {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  color: var(--texto-3);
  display: flex; justify-content: space-between;
}

/* ---------- Aferidor: saúde da coleta ---------- */

.aferidor {
  background: var(--aferidor-fundo);
  border: var(--fio) solid var(--aferidor-borda);
  border-radius: var(--raio-2);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
}
.aferidor__topo { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.aferidor__pulso {
  width: 10px; height: 10px; border-radius: var(--raio-pilula);
  background: var(--aferidor-viva); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aferidor-viva) 22%, transparent);
}
.aferidor--atrasada .aferidor__pulso { background: var(--aferidor-atrasada); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aferidor-atrasada) 22%, transparent); }
.aferidor--parada .aferidor__pulso { background: var(--aferidor-parada); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aferidor-parada) 22%, transparent); }
.aferidor__estado { font-weight: var(--peso-medio); margin: 0; }
.aferidor--atrasada .aferidor__estado { color: var(--ressalva); }
.aferidor--parada .aferidor__estado { color: var(--falha); }
.aferidor__resumo { font-family: var(--fonte-dado); font-size: var(--t-xs); color: var(--texto-2); margin: 0; }

/* faixa de continuidade das 24h */
.faixa {
  display: flex; gap: 2px; height: var(--aferidor-faixa-altura);
  border-radius: var(--raio-1); overflow: hidden;
}
.faixa__bloco { flex: 1; background: var(--aferido); }
.faixa__bloco--fora { background: var(--superficie-3); }
.faixa__bloco--lacuna { background-color: var(--hachura-fundo); background-image: var(--hachura); }
.faixa__bloco--parada { background: var(--falha); }
.faixa__legenda {
  display: flex; justify-content: space-between;
  font-family: var(--fonte-dado); font-size: var(--t-2xs); color: var(--texto-3);
}

/* ---------- Nota de cuidado ---------- */

.nota-cuidado {
  border: var(--fio) dashed var(--borda-forte);
  border-radius: var(--raio-2);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-2);
  background: transparent;
  display: flex; gap: var(--e-3); align-items: flex-start;
}
.nota-cuidado__marca {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina);
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
  padding-top: 2px;
}

/* ---------- Botões e chips ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--botao-altura);
  padding: 0 var(--e-5);
  border-radius: var(--botao-raio);
  border: var(--fio) solid transparent;
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-family: var(--fonte-interface);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--tempo-curto) var(--curva), color var(--tempo-curto) var(--curva), border-color var(--tempo-curto) var(--curva);
}
.botao:hover { background: var(--botao-fundo-hover); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: 0.45; cursor: not-allowed; }
.botao--secundario {
  background: transparent;
  color: var(--botao-secundario-texto);
  border-color: var(--botao-secundario-borda);
}
.botao--secundario:hover { background: var(--superficie-2); }
.botao--baixo { min-height: 36px; padding: 0 var(--e-3); font-size: var(--t-xs); }
.botao--largo { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 40px; padding: 0 var(--e-4);
  border: var(--fio) solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: all var(--tempo-curto) var(--curva);
}
.chip:hover { border-color: var(--acento); color: var(--acento-texto); }
.chip[aria-pressed="true"] {
  background: var(--acento-fraco);
  border-color: var(--acento);
  color: var(--acento-texto);
  font-weight: var(--peso-medio);
}

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 2px var(--e-2);
  border-radius: var(--raio-1);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.04em;
  border: var(--fio) solid var(--borda);
  color: var(--texto-2);
}
.etiqueta--viva { color: var(--aferido); border-color: var(--aferido-borda); background: var(--aferido-fundo); }
.etiqueta--atrasada { color: var(--ressalva); border-color: var(--ressalva-borda); background: var(--ressalva-fundo); }
.etiqueta--parada { color: var(--falha); border-color: var(--falha-borda); background: var(--falha-fundo); }
.etiqueta--espera { color: var(--acento-texto); border-color: var(--acento-borda); background: var(--acento-fraco); }

/* ---------- Tabela de clientes ---------- */

.tabela-envelope {
  border: var(--fio) solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--superficie);
  overflow: hidden;
}
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela thead th {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina);
  text-transform: uppercase;
  color: var(--tabela-cabecalho);
  font-weight: var(--peso-normal);
  border-bottom: var(--fio) solid var(--borda);
  background: var(--superficie-2);
  white-space: nowrap;
}
.tabela tbody td {
  padding: var(--tabela-densidade) var(--e-4);
  border-bottom: var(--fio) solid var(--tabela-linha);
  vertical-align: top;
}
.tabela tbody tr:hover { background: var(--tabela-hover); }
.tabela__cliente { font-weight: var(--peso-medio); color: var(--texto); }
.tabela__meta { font-family: var(--fonte-dado); font-size: var(--t-2xs); color: var(--texto-3); display: block; margin-top: 2px; }
.tabela__numero { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; }
.tabela__erro {
  display: block; margin-top: var(--e-2);
  padding: var(--e-2) var(--e-3);
  background: var(--falha-fundo);
  border-left: 2px solid var(--falha-borda);
  border-radius: var(--raio-1);
  color: var(--texto);
  font-size: var(--t-xs);
  max-width: 52ch;
}
.tabela__acao { white-space: nowrap; }
.rolagem-lateral { overflow-x: auto; }

/* ---------- Gráfico com faixa de evento ---------- */

.grafico { width: 100%; height: auto; display: block; }
.g-eixo { stroke: var(--borda-forte); stroke-width: 1; }
.g-grade { stroke: var(--grafico-grade); stroke-width: 1; }
.g-hachura { stroke: var(--grafico-lacuna); stroke-width: 1.4; }
.g-barra { fill: var(--grafico-barra); }
.g-lacuna { fill: url(#hach); stroke: var(--acento-borda); stroke-width: 1; }
.g-evento-faixa { fill: var(--grafico-evento); opacity: 0.16; }
.g-evento-linha { stroke: var(--grafico-evento); stroke-width: 1.5; stroke-dasharray: 4 4; }
.g-evento-texto { fill: var(--ressalva); font-family: var(--fonte-interface); font-size: 11px; }
.g-rotulo { fill: var(--texto-3); font-family: var(--fonte-dado); font-size: 10px; }
.g-nota { fill: var(--acento-texto); font-family: var(--fonte-dado); font-size: 10px; }
.grafico__legenda {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  font-family: var(--fonte-dado); font-size: var(--t-2xs); color: var(--texto-3);
  margin-top: var(--e-3);
}
.grafico__chave { display: inline-flex; align-items: center; gap: var(--e-2); }
.grafico__amostra { width: 14px; height: 10px; border-radius: 1px; display: inline-block; }

/* ---------- Formulário ---------- */

.form-secao {
  background: var(--superficie);
  border: var(--fio) solid var(--borda);
  border-radius: var(--raio-2);
  padding: var(--e-5);
  display: grid;
  gap: var(--e-5);
}
.form-secao__cabecalho { display: grid; gap: var(--e-1); }
.form-passo {
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--fonte-dado); font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina); text-transform: uppercase; color: var(--texto-3);
}
.form-progresso { display: flex; gap: var(--e-1); }
.form-progresso__passo { height: 4px; flex: 1; background: var(--superficie-3); border-radius: var(--raio-pilula); }
.form-progresso__passo--feito { background: var(--aferido); }
.form-progresso__passo--atual { background: var(--acento); }

.campo { display: grid; gap: var(--e-2); }
.campo__rotulo { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--campo-rotulo); }
.campo__ajuda { font-size: var(--t-xs); color: var(--texto-3); margin: 0; }
.campo__entrada {
  min-height: var(--campo-altura);
  padding: 0 var(--e-3);
  border: var(--fio) solid var(--campo-borda);
  border-radius: var(--campo-raio);
  background: var(--campo-fundo);
  color: var(--campo-texto);
  font-family: var(--fonte-interface);
  font-size: var(--t-base);
  width: 100%;
}
.campo__entrada::placeholder { color: var(--texto-3); }
.campo__entrada:focus-visible { border-color: var(--campo-borda-foco); }
.campo--erro .campo__entrada { border-color: var(--falha); }
.campo__erro {
  font-size: var(--t-xs); color: var(--falha); margin: 0;
  display: flex; gap: var(--e-2);
}
.atalhos { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Grade de horário da semana */
.grade-horario { display: grid; gap: var(--e-2); }
.grade-linha {
  display: grid;
  grid-template-columns: 4.5ch auto 1fr;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  border: var(--fio) solid var(--borda-fraca);
  border-radius: var(--raio-2);
  background: var(--superficie);
}
.grade-linha--fechado { background: var(--superficie-2); }
.grade-linha__dia {
  font-family: var(--fonte-dado); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-2);
}
.grade-linha__faixas { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.grade-linha--fechado .grade-linha__faixas { color: var(--texto-3); font-size: var(--t-sm); }
.hora {
  width: 8ch; min-height: 40px; text-align: center;
  border: var(--fio) solid var(--campo-borda); border-radius: var(--raio-2);
  background: var(--campo-fundo); color: var(--campo-texto);
  font-family: var(--fonte-dado); font-size: var(--t-sm);
}
.ate { color: var(--texto-3); font-size: var(--t-xs); }

/* interruptor */
.interruptor { display: inline-flex; align-items: center; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__trilho {
  width: 46px; height: 28px; border-radius: var(--raio-pilula);
  background: var(--superficie-3); border: var(--fio) solid var(--borda-forte);
  position: relative; transition: background var(--tempo-curto) var(--curva);
}
.interruptor__trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: var(--raio-pilula);
  background: var(--superficie); border: var(--fio) solid var(--borda-forte);
  transition: transform var(--tempo-medio) var(--curva);
}
.interruptor input:checked + .interruptor__trilho { background: var(--acento); border-color: var(--acento); }
.interruptor input:checked + .interruptor__trilho::after { transform: translateX(18px); border-color: var(--acento); }
.interruptor input:focus-visible + .interruptor__trilho {
  box-shadow: 0 0 0 var(--anel-recuo) var(--fundo), 0 0 0 calc(var(--anel-recuo) + var(--anel-largura)) var(--anel-foco);
}

/* ---------- Documento e aceite ---------- */

.documento {
  background: var(--documento-fundo);
  border: var(--fio) solid var(--borda);
  border-radius: var(--raio-2);
  overflow: hidden;
}
.documento__topo {
  padding: var(--e-4) var(--e-5) var(--e-3);
  border-bottom: var(--fio) solid var(--borda);
  position: sticky; top: 0; background: var(--documento-fundo); z-index: 2;
}
.documento__barra { height: 3px; background: var(--superficie-3); border-radius: var(--raio-pilula); margin-top: var(--e-3); }
.documento__barra-preenchida { height: 100%; width: 0%; background: var(--acento); border-radius: var(--raio-pilula); transition: width var(--tempo-curto) linear; }
.resumo-autorizacao {
  margin: var(--e-5); padding: var(--e-4);
  background: var(--acento-fraco);
  border: var(--fio) solid var(--acento-borda);
  border-radius: var(--raio-2);
}
.resumo-autorizacao ul { margin: var(--e-3) 0 0; padding-left: var(--e-5); display: grid; gap: var(--e-2); }
.resumo-autorizacao li { font-size: var(--t-sm); }
.texto-legal {
  max-height: 340px; overflow-y: auto;
  padding: 0 var(--e-5) var(--e-5);
  font-family: var(--fonte-documento);
  font-size: var(--t-md);
  line-height: var(--altura-leitura);
  color: var(--documento-texto);
}
.texto-legal h3 {
  font-size: var(--t-base); font-family: var(--fonte-interface);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-3); margin: var(--e-6) 0 var(--e-2);
}
.texto-legal p { margin: 0 0 var(--e-4); }
.texto-legal__fim {
  font-family: var(--fonte-dado); font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina); text-transform: uppercase;
  color: var(--texto-3); border-top: var(--fio) dashed var(--borda); padding-top: var(--e-3);
}
.aceite {
  margin: 0; padding: var(--e-5);
  background: var(--aceite-fundo);
  border-top: var(--regua) solid var(--aceite-borda);
  display: grid; gap: var(--e-4);
}
.aceite__bloqueio {
  display: flex; gap: var(--e-3); align-items: center;
  font-size: var(--t-sm); color: var(--texto-2);
  padding: var(--e-3);
  background-color: var(--hachura-fundo); background-image: var(--hachura);
  border-radius: var(--raio-2);
}
.aceite__marca {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-sm); cursor: pointer;
}
.aceite__caixa {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; flex: none; margin: 0;
  border: 2px solid var(--acento); border-radius: var(--raio-1);
  background: var(--superficie); cursor: pointer; position: relative;
}
.aceite__caixa:checked { background: var(--acento); }
.aceite__caixa:checked::after {
  content: ""; position: absolute; left: 7px; top: 2px;
  width: 6px; height: 12px; border: solid var(--sobre-acento);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.aceite__assinatura { display: grid; gap: var(--e-2); }
.aceite__registro {
  font-family: var(--fonte-dado); font-size: var(--t-2xs);
  color: var(--texto-3); display: grid; gap: 2px;
}

/* ---------- Segredo de uma vez ---------- */

.veu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--segredo-veu);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-4);
  backdrop-filter: blur(2px);
}
.veu[hidden] { display: none; }
.segredo {
  width: min(560px, 100%);
  background: var(--segredo-fundo);
  border: var(--fio) solid var(--borda);
  border-top: var(--regua) solid var(--segredo-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3);
  padding: var(--e-6);
  display: grid; gap: var(--e-4);
  animation: subir var(--tempo-longo) var(--curva);
}
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
.segredo__aviso {
  font-family: var(--fonte-dado); font-size: var(--t-2xs);
  letter-spacing: var(--tracking-maquina); text-transform: uppercase;
  color: var(--ressalva);
}
.segredo__caixa {
  background: var(--segredo-caixa-fundo);
  color: var(--segredo-caixa-texto);
  border-radius: var(--raio-2);
  padding: var(--e-4);
  font-family: var(--fonte-dado);
  font-size: var(--t-md);
  word-break: break-all;
  line-height: 1.5;
  user-select: all;
}
.segredo__acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.segredo__confirma { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sm); cursor: pointer; }

/* ---------- Estrutura de página ---------- */

.envelope { max-width: 1180px; margin: 0 auto; padding: var(--e-8) var(--e-5) var(--e-16); }
.pilha { display: grid; gap: var(--e-4); }
.pilha--larga { gap: var(--e-6); }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.grade-console { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--e-4); align-items: start; }
@media (max-width: 900px) {
  .grade-2, .grade-3, .grade-console { grid-template-columns: minmax(0, 1fr); }
}

.cartao {
  background: var(--superficie);
  border: var(--fio) solid var(--borda);
  border-radius: var(--raio-2);
  padding: var(--e-5);
}
.cartao__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-4); flex-wrap: wrap;
}

/* aparelho de celular para as telas do médico */
.aparelho {
  width: 380px; max-width: 100%;
  border: 10px solid var(--carbono-800);
  border-radius: 30px;
  background: var(--fundo);
  overflow: hidden;
  box-shadow: var(--sombra-3);
}
.aparelho__tela { height: 720px; overflow-y: auto; padding: var(--e-4); background: var(--fundo); }
.aparelho__barra {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--e-2) var(--e-3); font-family: var(--fonte-dado);
  font-size: var(--t-2xs); color: var(--texto-3);
  border-bottom: var(--fio) solid var(--borda-fraca);
  position: sticky; top: 0; background: var(--fundo); z-index: 3;
}

/* marca */
.marca { display: flex; align-items: center; gap: var(--e-3); }
.marca__sinal {
  width: 30px; height: 30px; border-radius: var(--raio-1);
  background-color: var(--acento-fraco);
  background-image: var(--hachura);
  border: var(--fio) solid var(--acento-borda);
  position: relative; flex: none;
}
.marca__sinal::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; transform: translate(-50%, -50%);
  background: var(--acento);
}
.marca__nome {
  font-family: var(--fonte-dado); font-size: var(--t-base);
  letter-spacing: 0.22em; font-weight: var(--peso-medio); color: var(--texto);
}
.marca__linha { font-size: var(--t-2xs); color: var(--texto-3); letter-spacing: 0.02em; }

/* utilidades mínimas */
.dupla { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.mono { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* entrada da página, um movimento só */
.entra { animation: entrar var(--tempo-longo) var(--curva) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

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