/*
 * Painel de revisão da Infinita — estilo de produção.
 * Sistema visual em docs/design/sistema-visual.md; tokens espelham docs/design/sistema.css.
 * Sem framework, sem CDN, nada inline: a CSP do index.html só aceita esta folha.
 */

/* ---------- 0. Fontes (self-hosted, OFL; ver fontes/OFL.txt) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fontes/atkinson-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fontes/atkinson-next-italic-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("fontes/atkinson-mono-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Fallbacks com métricas casadas: enquanto a woff2 não chega (1ª visita), o Segoe UI ocupa
   o mesmo espaço e a página não salta quando a fonte troca. Valores medidos nos arquivos. */
@font-face {
  font-family: "Atkinson Next Fallback";
  src: local("Segoe UI"), local("SegoeUI");
  size-adjust: 98.97%;      /* xAvgCharWidth 533/1000 ÷ 1103/2048 */
  ascent-override: 99.43%;  /* 984/1000 ÷ size-adjust */
  descent-override: 31.93%; /* 316/1000 ÷ size-adjust */
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Mono Fallback";
  src: local("Consolas");
  size-adjust: 114.95%;     /* 632/1000 ÷ 1126/2048 */
  ascent-override: 85.60%;
  descent-override: 27.49%;
  line-gap-override: 0%;
}

/* =============================================================================
   Infinita — Mesa de revisão. Folha de estilo única (CSP recusa estilo inline).

   Mundo visual: a mesa de luz do perito. Base clara e neutra para o trabalho; a
   câmara escura (visor) em navy quase preto; teal é ação; laranja é a marcação do
   lápis e o alerta — nunca decoração. Tipografia Atkinson Hyperlegible Next/Mono
   (desambigua 0/O, 1/l/I: o trabalho é ler identificadores em fotos).
   ============================================================================= */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);

  /* marca */
  --navy: #0B2A4A;
  --petroleo: #0F4C5C;
  --teal: #1A6F87;
  --teal-claro: #1E90A8;
  --ciano: #6ED3F0;
  --laranja: #E8A317;
  --laranja-marca: #A8720A;      /* o lápis pressionado: traços de 2 px (4,1:1 sobre branco) */
  --laranja-serie: #B47D06;      /* séries de gráfico (validado no método dataviz) */
  --laranja-texto: #8A5E10;      /* laranja como texto sobre claro (5,0:1 no fundo suspeita) */

  /* superfícies e tintas */
  --fundo: #F4F5F7;              /* a mesa */
  --superficie: #FFFFFF;         /* a folha */
  --superficie-2: #F6F8FA;       /* thead, barras, kbd: meio tom mais fria */
  --superficie-3: #E9EDF1;       /* rebaixo: quadro de mídia, esqueleto, desabilitado */
  --borda: #E3E7EC;              /* hairline */
  --borda-forte: #C9D0D8;        /* contêineres que leem como objeto */
  --borda-controle: #7F8C9A;     /* input, checkbox: única borda com exigência de 3:1 */
  --texto: #16243A;              /* 15,6:1 */
  --texto-2: #4A5A6C;            /* 7,1:1 */
  --texto-3: #5F6C7B;            /* 5,4:1 */
  --acao: var(--teal);           /* branco sobre teal 5,7:1 */
  --acao-hover: #155F75;
  --acao-ativa: #0F4C5C;
  --acao-suave: #E4F1F5;         /* seleção, nav atual, toggle ativo */
  --foco: #1E90A8;

  /* estados semânticos: fundo claro + texto escuro (AA) */
  --suspeita-fundo: #FBF0D5; --suspeita-texto: #6B4400; --suspeita-texto-2: #8A5E10; --suspeita-borda: #E9D6A0;
  --duvida-fundo: #E0F0F4;   --duvida-texto: #0F4C5C;   --duvida-texto-2: #2C6B7D;   --duvida-borda: #B9DBE4;
  --limpo-fundo: #E8EBEF;    --limpo-texto: #3D4854;    --limpo-texto-2: #5A6673;    --limpo-borda: #C9D0D8; --limpo-ponto: #6F7C8A;
  --amostra-fundo: #E7EEF6;  --amostra-texto: #1F4368;  --amostra-borda: #B9CCE3;
  --erro: #B3261E;  --erro-texto: #8E1F18; --erro-fundo: #FCE8E6;  --erro-borda: #F0C4BF;
  --ok: #1F6E43;    --ok-texto: #1A5A38;   --ok-fundo: #E2F1E8;    --ok-borda: #BFE0CC;
  --aviso-texto: #6B4400; --aviso-fundo: #FBF0D5;
  --serio: #B3380A; --serio-fundo: #FCE8DF;

  /* câmara escura */
  --escuro-fundo: #061527;
  --escuro-superficie: #0B2A4A;
  --escuro-superficie-2: #10334F;
  --escuro-borda: #1B3A5A;
  --escuro-texto: #E9EFF4;       /* 15,8:1 */
  --escuro-texto-2: #B1C2D2;     /* 10,1:1 */
  --escuro-texto-3: #8CA0B4;     /* 6,8:1 */
  --escuro-foco: #6ED3F0;

  /* forma */
  --raio-1: 3px; --raio-2: 4px; --raio-3: 6px;
  --sombra-1: 0 1px 2px rgba(11, 42, 74, 0.06), 0 1px 1px rgba(11, 42, 74, 0.04);
  --sombra-2: 0 4px 12px -2px rgba(11, 42, 74, 0.14), 0 2px 4px rgba(11, 42, 74, 0.06);
  --sombra-3: 0 16px 40px -8px rgba(11, 42, 74, 0.28), 0 4px 12px rgba(11, 42, 74, 0.10);
  --altura-topo: 52px;
  --largura-max: 1440px;
  --gutter: 24px;

  /* tipografia */
  --fonte: "Atkinson Hyperlegible Next", "Atkinson Next Fallback", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", "Atkinson Mono Fallback", Consolas, "SF Mono", Menlo, monospace;
  --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem; --t-24: 1.5rem; --t-32: 2rem;

  /* motion */
  --dur-1: 100ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms; --dur-5: 600ms;
  --dur-saida: 0.62;
  --ease-chegada: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-saida: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-estado: cubic-bezier(0.2, 0, 0, 1);
  --desl-1: 4px; --desl-2: 8px; --desl-3: 12px;
  --stagger: 35ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; --desl-1: 0px; --desl-2: 0px; --desl-3: 0px; --stagger: 0ms; }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; font-size: 16px; }
body {
  margin: 0; min-height: 100%;
  font-family: var(--fonte); font-size: var(--t-14); line-height: 1.45; color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-ligatures: none;
}
[hidden] { display: none !important; }
a { color: var(--acao); }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; transition: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; color: var(--navy); font-weight: 650; line-height: 1.2; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: var(--t-24); }
h2 { font-size: var(--t-16); }
h3 { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.06em; }
p { margin: 0; }
dl, ol, ul { margin: 0; padding: 0; }
img { max-width: 100%; }
kbd, code { font-family: var(--mono); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.mudo { color: var(--texto-3); }
.pequeno { font-size: var(--t-12); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.num { font-variant-numeric: tabular-nums; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: var(--raio-2); background: var(--navy); color: #fff; }
.pular:focus { left: 8px; }
.link { padding: 0; border: 0; background: none; color: var(--acao); text-decoration: underline; cursor: pointer; }
.truncar { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; vertical-align: -0.2em; }
.ic-pequeno { width: 14px; height: 14px; }
.ic-grande { width: 28px; height: 28px; }

.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border: 1px solid var(--borda-forte); border-bottom-width: 2px; border-radius: 4px;
  background: var(--superficie); color: var(--texto-3); font-family: var(--mono); font-size: 11px; line-height: 1; white-space: nowrap;
}
.botao .kbd { margin-left: 4px; }
.kbd-inverso { border-color: rgba(255, 255, 255, 0.35); background: rgba(11, 42, 74, 0.35); color: #fff; }

/* ---------------------------------------------------------------- botões e campos */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 5px 12px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-2);
  background: var(--superficie); color: var(--texto);
  font-weight: 550; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease-estado), border-color var(--dur-1) var(--ease-estado), color var(--dur-1) var(--ease-estado), transform var(--dur-1) var(--ease-estado);
}
.botao:hover { background: var(--superficie-3); border-color: var(--texto-3); color: var(--navy); }
.botao:active:not(:disabled) { transform: scale(0.98); }
.botao:disabled { opacity: 0.5; cursor: default; }
.botao:disabled:hover { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); }
.botao-primario { background: var(--acao); border-color: var(--acao); color: #fff; }
.botao-primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); color: #fff; }
.botao-primario:active:not(:disabled) { background: var(--acao-ativa); }
.botao-primario:disabled:hover { background: var(--acao); border-color: var(--acao); color: #fff; }
.botao-secundario { background: var(--superficie); }
.botao-fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.botao-fantasma:hover { background: var(--superficie-3); border-color: transparent; }
.botao-perigo { color: var(--erro); }
.botao-perigo:hover { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
.botao.botao-perigo:not(.botao-fantasma) { border-color: var(--erro-borda); }
.botao-mini { min-height: 28px; padding: 3px 8px; font-size: var(--t-13); }
.botao-icone { padding: 6px; }
.botao-largo { width: 100%; }

.entrada, .seletor {
  min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--borda-controle); border-radius: var(--raio-2);
  background: var(--superficie); color: var(--texto);
  transition: border-color var(--dur-1) var(--ease-estado);
}
.entrada:hover, .seletor:hover { border-color: var(--texto-2); }
.entrada:focus, .seletor:focus { border-color: var(--teal-claro); outline: 2px solid var(--foco); outline-offset: 0; }
.entrada:disabled, .seletor:disabled { background: var(--superficie-2); color: var(--texto-3); }
.entrada:autofill, .entrada:-webkit-autofill { box-shadow: inset 0 0 0 1000px var(--superficie); -webkit-text-fill-color: var(--texto); }
.entrada-mini { min-height: 30px; padding: 3px 8px; font-size: var(--t-13); }
textarea.entrada { resize: none; line-height: 1.4; }
.seletor { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6772' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: var(--t-13); font-weight: 550; color: var(--texto-2); }
.campo-erro { color: var(--erro); font-size: var(--t-12); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--raio-1); font-size: var(--t-12); background: var(--superficie-3); color: var(--texto-2); border: 1px solid var(--borda); white-space: nowrap; }
.chip-novo { background: var(--suspeita-fundo); color: var(--suspeita-texto); border-color: var(--suspeita-borda); font-weight: 600; }
.chip-futuro { margin-left: 8px; font-weight: 500; font-size: 11px; text-transform: none; color: var(--texto-3); background: transparent; border-style: dashed; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-1); }
.cartao-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--t-14); font-weight: 650; color: var(--navy); }

/* ---------------------------------------------------------------- badges, marcas, régua */

.veredito { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: var(--raio-2); font-size: var(--t-12); font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.veredito-ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.veredito-suspeita { background: var(--suspeita-fundo); color: var(--suspeita-texto); border-color: var(--suspeita-borda); }
.veredito-suspeita .veredito-ponto { background: var(--laranja); box-shadow: 0 0 0 1px var(--laranja-marca); }
.veredito-duvida { background: var(--duvida-fundo); color: var(--duvida-texto); border-color: var(--duvida-borda); }
.veredito-duvida .veredito-ponto { background: var(--teal-claro); }
.veredito-limpo { background: var(--limpo-fundo); color: var(--limpo-texto); border-color: var(--limpo-borda); }
.veredito-limpo .veredito-ponto { background: var(--limpo-ponto); }
.veredito-amostra { background: var(--amostra-fundo); color: var(--amostra-texto); border-color: var(--amostra-borda); }
.veredito-sem_auditoria { color: var(--texto-3); border-color: var(--borda-forte); background: var(--superficie-2); }
.veredito-sem_auditoria .veredito-ponto { background: var(--texto-3); }
.veredito-amostra .veredito-ponto { background: var(--petroleo); }

.sev { display: inline-block; padding: 1px 6px; border-radius: var(--raio-1); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; }
.sev-alta { background: var(--laranja); color: var(--navy); box-shadow: inset 0 0 0 1px var(--laranja-marca); }
.sev-media { background: var(--suspeita-fundo); color: var(--suspeita-texto); border: 1px solid var(--suspeita-borda); }
.sev-baixa { background: var(--duvida-fundo); color: var(--duvida-texto); border: 1px solid var(--duvida-borda); }
.sev-info { background: transparent; color: var(--texto-3); border: 1px solid var(--borda-forte); }

.marcas { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.marca { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 6px; border-radius: var(--raio-1); font-size: var(--t-12); white-space: nowrap; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); }
.marca-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--borda-forte); }
.marca-alta { border-color: var(--suspeita-borda); color: var(--suspeita-texto); }
.marca-alta .marca-ponto { background: var(--laranja); box-shadow: 0 0 0 1px var(--laranja-marca); }
.marca-media .marca-ponto { background: var(--laranja-marca); }
.marca-baixa .marca-ponto { background: var(--teal-claro); }
.marca-info { color: var(--texto-3); }
.marca-mais { color: var(--texto-3); border-style: dashed; }
.marca-n { margin-left: 2px; font-size: 11px; color: var(--texto-3); }

.marcador { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--limpo-fundo); color: var(--limpo-texto); }
.marcador-alta { background: var(--laranja); color: var(--navy); }
.marcador-media { background: var(--suspeita-fundo); color: var(--suspeita-texto); border: 1px solid var(--suspeita-borda); }
.marcador-baixa { background: var(--duvida-fundo); color: var(--duvida-texto); }

/* Régua de score: trilho fino, limiares em 3 e 8, valor ao lado. Nunca anel de progresso. */
.regua { --pct: 0%; display: inline-grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; width: 100%; max-width: 260px; }
.regua-trilho { position: relative; height: 6px; border-radius: 3px; background: var(--limpo-fundo); overflow: visible; }
.regua-preenchimento { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct); border-radius: 3px; background: var(--limpo-ponto); transform-origin: 0 50%; }
.regua-suspeita .regua-preenchimento { background: var(--laranja); box-shadow: inset 0 0 0 1px var(--laranja-marca); }
.regua-duvida .regua-preenchimento { background: var(--teal-claro); }
.regua-marcador { position: absolute; top: -3px; left: var(--pct); width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--navy); }
.regua-limiar { position: absolute; top: -2px; width: 1px; height: 10px; background: var(--texto-3); }
.regua-limiar-3 { left: 18.75%; }
.regua-limiar-8 { left: 50%; }
.regua-valor { grid-column: 2; grid-row: 1; font-weight: 700; font-size: var(--t-13); color: var(--navy); min-width: 2ch; text-align: right; }
.regua-rotulos { grid-column: 1; grid-row: 2; position: relative; height: 12px; font-size: 10px; color: var(--texto-3); letter-spacing: 0.02em; }
.regua-rotulo { position: absolute; top: 0; transform: translateX(-50%); }
.regua-rotulo-3 { left: 18.75%; }
.regua-rotulo-8 { left: 50%; }
.regua-compacta { max-width: 120px; column-gap: 8px; }
.regua-compacta .regua-trilho { height: 5px; }
.regua-compacta .regua-marcador { height: 11px; top: -3px; }
.regua-compacta .regua-valor { font-size: var(--t-13); }
.regua-animar .regua-preenchimento { animation: regua-crescer var(--dur-5) var(--ease-chegada) 120ms both; }
.regua-animar .regua-marcador { animation: regua-chegar var(--dur-5) var(--ease-chegada) 120ms both; }
@keyframes regua-crescer { from { transform: scaleX(0); } }
@keyframes regua-chegar { from { opacity: 0; } to { opacity: 1; } }

/* Skeleton: pulso de opacidade, nunca shimmer. Dimensões finais (zero CLS). */
.sk { display: inline-block; border-radius: var(--raio-1); background: var(--limpo-fundo); animation: pulso 1400ms ease-in-out infinite; vertical-align: middle; }
.sk-pilula { border-radius: 999px; }
.sk-quadro { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
@keyframes pulso { 50% { opacity: 0.55; } }
html.oculta *, html.oculta *::before, html.oculta *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; opacity: 0.7; } }

/* ---------------------------------------------------------------- topo */

.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--altura-topo); padding: 0 var(--gutter);
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.topo-esq, .topo-dir { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca-topo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.marca-topo img { display: block; height: 30px; width: auto; }
.marca-produto { padding-left: 10px; border-left: 1px solid var(--borda-forte); font-size: var(--t-13); font-weight: 550; color: var(--texto-2); white-space: nowrap; }
.menu { display: flex; gap: 2px; margin-left: 12px; }
.menu a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--raio-2); color: var(--texto-2); text-decoration: none; font-weight: 550; transition: background var(--dur-1) var(--ease-estado), color var(--dur-1) var(--ease-estado); }
.menu a:hover { background: var(--superficie-3); color: var(--navy); }
.menu a[aria-current="page"] { background: var(--acao-suave); color: var(--navy); }
.busca { position: relative; display: flex; align-items: center; }
.busca-ic { position: absolute; left: 9px; color: var(--texto-3); pointer-events: none; }
.busca-campo { width: 240px; min-height: 34px; padding: 5px 34px 5px 32px; border: 1px solid var(--borda-forte); border-radius: var(--raio-2); background: var(--superficie-2); font-family: var(--mono); font-size: var(--t-13); transition: border-color var(--dur-1) var(--ease-estado), background var(--dur-1) var(--ease-estado); }
.busca-campo:hover { border-color: var(--texto-3); }
.busca-campo:focus { background: var(--superficie); border-color: var(--teal-claro); outline: 2px solid var(--foco); outline-offset: 0; }
.busca-campo::placeholder { font-family: var(--fonte); color: var(--texto-3); }
.busca-kbd { position: absolute; right: 8px; }
.acorde { font-size: var(--t-12); color: var(--texto-3); }
.usuario { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--borda); color: var(--texto-2); white-space: nowrap; }
.usuario-nome { font-weight: 550; color: var(--texto); }
.usuario-papel { font-size: var(--t-12); }

/* ---------------------------------------------------------------- faixas, avisos, painel de atalhos */

.faixa { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--superficie-2); color: var(--texto-2); }
.faixa .ic { flex: none; margin-top: 1px; color: var(--texto-3); }
.faixa strong { color: var(--texto); }
.faixa-sessao { position: fixed; top: var(--altura-topo); left: 0; right: 0; z-index: 25; align-items: center; flex-wrap: wrap; border-radius: 0; border-width: 0 0 1px; background: var(--suspeita-fundo); border-color: var(--suspeita-borda); color: var(--suspeita-texto); animation: descer var(--dur-3) var(--ease-chegada) both; }
.faixa-sessao .ic { color: var(--suspeita-texto-2); }
.faixa-sessao-form { display: flex; gap: 6px; align-items: center; }
@keyframes descer { from { transform: translateY(-100%); } }

.avisos { position: fixed; right: 20px; top: calc(var(--altura-topo) + 12px); z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--raio-2); background: var(--navy); color: #fff; box-shadow: var(--sombra-2); animation: toast-entrar var(--dur-3) var(--ease-chegada) both; }
.aviso .ic { flex: none; margin-top: 1px; }
.aviso-texto { flex: 1; }
.aviso-erro { background: var(--erro); }
.aviso-ok { background: var(--ok); }
.aviso-fechar { margin: -4px -6px -4px auto; padding: 4px; display: flex; background: transparent; border: none; color: inherit; cursor: pointer; border-radius: var(--raio-1); }
.aviso-fechar:hover { background: rgba(255, 255, 255, 0.15); }
.aviso-saindo { animation: toast-sair calc(var(--dur-3) * var(--dur-saida)) var(--ease-saida) forwards; pointer-events: none; }
@keyframes toast-entrar { from { opacity: 0; transform: translateX(var(--desl-3)); } }
@keyframes toast-sair { to { opacity: 0; transform: translateX(var(--desl-2)); } }

.painel-atalhos { position: fixed; top: calc(var(--altura-topo) + 8px); right: 16px; z-index: 40; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - var(--altura-topo) - 24px); overflow: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-3); animation: entrar-no-lugar var(--dur-3) var(--ease-chegada) both; }
.painel-atalhos-topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.painel-atalhos-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding: 14px 16px 18px; }
.painel-atalhos h3 { margin-bottom: 8px; }
.painel-atalhos dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 4px 0; align-items: center; font-size: var(--t-13); color: var(--texto-2); }
.painel-atalhos dt { display: flex; gap: 3px; flex-wrap: wrap; }
.dica-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--duvida-borda); border-radius: var(--raio-2); background: var(--duvida-fundo); color: var(--duvida-texto); }
.dica-inline .ic { color: var(--teal); }
.dica-inline p { flex: 1; }
.dica-inline .kbd { background: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------------- layout das telas */

.principal { max-width: var(--largura-max); margin: 0 auto; padding: 20px var(--gutter) 40px; }
.barra-tela { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.barra-tela .sub { margin-top: 2px; color: var(--texto-3); }
.barra-tela-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erro-bloco, .sem-permissao, .vazio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; color: var(--texto-3); }
.erro-bloco .ic, .sem-permissao .ic { color: var(--erro); }
.sem-permissao .ic { color: var(--texto-3); }
.vazio .ic { color: var(--teal); margin-bottom: 4px; }
.vazio strong { font-size: var(--t-16); color: var(--navy); }
.vazio p { max-width: 46ch; }
.tela-fila .vazio { animation: entrar-no-lugar var(--dur-4) var(--ease-chegada) both; }
.rodape-dicas { margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

@keyframes entrar-no-lugar { from { opacity: 0; transform: translateY(var(--desl-1)); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- login */

.tela-login { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); }
.login { width: min(400px, 100%); padding: 32px 32px 24px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-2); }
.login-logo { display: block; height: 40px; width: auto; margin-bottom: 22px; }
.login h1 { font-size: var(--t-20); margin-bottom: 2px; }
.login-sub { margin-bottom: 18px; }
.login .campo { margin-bottom: 14px; }
.login .botao-largo { margin-top: 4px; }
.login .erro { margin-bottom: 14px; padding: 8px 10px; border: 1px solid var(--erro-borda); border-radius: var(--raio-2); background: var(--erro-fundo); color: var(--erro); }
.login-nota { display: flex; align-items: center; gap: 6px; margin-top: 16px; }

/* ---------------------------------------------------------------- fila */

.teto { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); font-size: var(--t-12); color: var(--texto-2); }
.teto-perto { border-color: var(--suspeita-borda); background: var(--suspeita-fundo); color: var(--suspeita-texto); }
.status-conexao { color: var(--laranja-texto); }
.filtros { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.filtro { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--texto-2); }
.filtro .seletor { min-height: 30px; padding: 3px 26px 3px 8px; font-size: var(--t-13); }
.filtro-check input { width: 15px; height: 15px; accent-color: var(--teal); }
.filtro-fixo { margin-left: auto; color: var(--texto-3); font-size: var(--t-12); }

.painel-tabela { overflow: hidden; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { padding: 9px 12px; text-align: left; font-size: var(--t-12); font-weight: 600; color: var(--texto-3); background: var(--superficie-2); border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela td { padding: 8px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td, .tabela tbody tr:last-child th { border-bottom: none; }
.tabela-compacta th, .tabela-compacta td { padding: 6px 10px; font-size: var(--t-13); }
.tabela-compacta th[scope="row"] { font-weight: 550; text-transform: none; letter-spacing: 0; font-size: var(--t-13); color: var(--texto); background: transparent; border-bottom: 1px solid var(--borda); }

.tabela-fila tbody tr.linha { height: 44px; cursor: pointer; transition: background var(--dur-1) var(--ease-estado); }
.tabela-fila tbody tr.linha:hover { background: var(--superficie-2); }
.tabela-fila tbody tr.linha-cursor { background: var(--acao-suave); }
.tabela-fila tbody tr.linha-cursor:focus-visible { outline: none; }
.tabela-fila tbody tr.linha-cursor:focus-visible td { box-shadow: inset 0 0 0 2px var(--foco); }
.tabela-fila tbody tr.linha:focus-visible { outline: none; }
.col-cursor { width: 24px; padding-right: 0 !important; }
.cursor-marca { display: block; width: 0; height: 0; margin: 0 auto; border: 5px solid transparent; border-left: 7px solid var(--navy); opacity: 0; transition: opacity var(--dur-1) var(--ease-estado); }
.linha-cursor .cursor-marca { opacity: 1; }
.col-os { width: 112px; }
.os-link { font-weight: 700; color: var(--navy); text-decoration: none; }
.os-link:hover { text-decoration: underline; }
.col-veredito { width: 104px; }
.col-score { width: 150px; }
.col-achados { min-width: 300px; }
.col-ecv { width: 200px; }
.col-veiculo { width: 210px; }
.col-veiculo .veiculo-nome { display: inline; }
.col-veiculo .veiculo-tipo { display: inline; margin-left: 6px; }
.col-veiculo .veiculo-tipo::before { content: "· "; }
.col-tempo { width: 88px; white-space: nowrap; color: var(--texto-2); }
.tabela-fila tbody tr.linha-cursor .col-cursor { box-shadow: inset 2px 0 0 var(--teal); }
.linha-pulada td { color: var(--texto-3); }
.linha-pulada .os-link { color: var(--texto-2); }
.linha-nova { animation: entrar-no-lugar var(--dur-3) var(--ease-chegada) both; }
.linha-nova td { background: var(--duvida-fundo); transition: background 1200ms var(--ease-estado); }
.linha-nova.assentada td { background: transparent; }
.linha-divisor td { padding: 8px 12px 8px 36px; background: var(--superficie-3); color: var(--texto-2); font-size: var(--t-13); }
.linha-divisor .ic { width: 15px; height: 15px; margin-right: 6px; color: var(--texto-3); }
.linha-sk td { height: 44px; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--borda); color: var(--texto-3); }

/* ---------------------------------------------------------------- laudo */

.tela-laudo { padding-bottom: 200px; }
.laudo-cabecalho { margin-bottom: 16px; }
.laudo-cabecalho-linha1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.voltar { display: inline-flex; align-items: center; gap: 4px; font-weight: 550; text-decoration: none; color: var(--texto-2); }
.voltar:hover { color: var(--navy); }
.laudo-cabecalho h1 { display: inline-flex; align-items: baseline; gap: 8px; }
.laudo-os { font-weight: 700; }
.laudo-regua { min-width: 220px; }
.laudo-pular { margin-left: auto; }
.laudo-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 18px; padding: 12px 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-3); }
.laudo-meta dt { font-size: var(--t-12); font-weight: 500; color: var(--texto-3); }
.laudo-meta dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.laudo-meta dd.mono { font-weight: 600; font-size: var(--t-13); white-space: nowrap; }

.laudo-corpo { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.coluna-achados { position: sticky; top: calc(var(--altura-topo) + 12px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--altura-topo) - 180px); overflow: auto; padding: 4px 4px 4px 4px; margin-left: -4px; }
.coluna-achados h2, .coluna-folha h2 { display: flex; align-items: center; gap: 8px; }
.contagem { font-size: var(--t-13); font-weight: 500; color: var(--texto-3); }
.faixa-laudo { font-size: var(--t-13); }
.faixa-laudo details { margin-top: 6px; }
.faixa-laudo summary { cursor: pointer; color: var(--acao); }
.faixa-amostra { background: var(--amostra-fundo); border-color: var(--amostra-borda); color: var(--amostra-texto); }
.faixa-amostra .ic { color: var(--amostra-texto); }
.faixa-erros { background: var(--suspeita-fundo); border-color: var(--suspeita-borda); color: var(--suspeita-texto); }
.faixa-erros .ic { color: var(--suspeita-texto-2); }
.faixa-reauditado { background: var(--suspeita-fundo); border-color: var(--laranja); color: var(--suspeita-texto); }
.faixa-reauditado .ic { color: var(--suspeita-texto-2); }
.faixa-pulsa { animation: pulso-borda-uma-vez var(--dur-5) var(--ease-estado) 1 both; animation-delay: var(--dur-3); }
@keyframes pulso-borda-uma-vez { 0% { box-shadow: 0 0 0 0 rgba(232, 163, 23, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(232, 163, 23, 0); } }
.diff { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 8px; }
.diff li { display: contents; }

.lista-achados { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista-achados > li { position: relative; }
.achado { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px 10px 14px; text-align: left; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--superficie); cursor: pointer; transition: background var(--dur-1) var(--ease-estado), border-color var(--dur-1) var(--ease-estado); }
.achado::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: var(--borda-forte); }
.achado-alta::before { background: var(--laranja); }
.achado-media::before { background: var(--laranja-marca); }
.achado-baixa::before { background: var(--teal-claro); }
.achado:hover, .achado.relacionado { border-color: var(--teal-claro); background: var(--superficie-2); }
.achado.ativo { background: var(--suspeita-fundo); border-color: var(--suspeita-borda); }
.achado-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.achado-codigo { font-size: 11px; color: var(--texto-3); }
.achado-titulo { font-weight: 600; color: var(--navy); }
.achado-evidencia { font-size: var(--t-13); color: var(--texto-2); }
.achado-acoes { display: flex; align-items: center; gap: 4px; padding: 2px 0 0 14px; flex-wrap: wrap; }
.achado-ajuda { margin-left: auto; font-size: var(--t-12); color: var(--texto-3); }
.achado-ajuda summary { cursor: pointer; padding: 3px 4px; }
.achado-ajuda p { padding: 2px 4px 6px; max-width: 40ch; color: var(--texto-2); }
.achado-sk { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio-2); }
.achados-removidos { padding: 6px 0 0; font-size: var(--t-13); }
.achados-removidos summary { cursor: pointer; color: var(--texto-3); }
.achados-removidos ul { list-style: none; padding: 6px 0 0 14px; display: flex; flex-direction: column; gap: 4px; }

.folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.folha { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.midia-bloco { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--superficie); transition: border-color var(--dur-1) var(--ease-estado), box-shadow var(--dur-1) var(--ease-estado); }
button.midia-bloco { cursor: zoom-in; }
button.midia-bloco:hover, .midia.realce .midia-bloco { border-color: var(--teal-claro); }
.midia.foco .midia-bloco { border-color: var(--laranja-marca); }
.midia-marca-removida .midia-bloco { border-style: dashed; border-color: var(--borda-forte); }
.midia-quadro { position: relative; aspect-ratio: 3 / 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--superficie-3); color: var(--texto-3); font-size: var(--t-12); overflow: hidden; }
.midia-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--superficie-3); opacity: 0; transition: opacity var(--dur-2) var(--ease-estado); }
.midia-pronta .midia-quadro img { opacity: 1; }
.midia-quadro .ic-grande { color: var(--borda-forte); }
.midia-estado { max-width: 90%; text-align: center; }
.midia-ausente .midia-quadro { background: repeating-linear-gradient(-45deg, var(--borda) 0 1px, transparent 1px 8px) var(--superficie-2); }
.midia-ausente-sinalizada .midia-quadro { background: repeating-linear-gradient(-45deg, var(--suspeita-borda) 0 1px, transparent 1px 8px) var(--suspeita-fundo); color: var(--suspeita-texto); }
.midia-ausente-sinalizada .midia-bloco { cursor: pointer; }
.midia-sem-evidencia .midia-quadro { background: var(--superficie-2); border-bottom: 1px dashed var(--borda); }
.midia-falha .midia-quadro { color: var(--erro); }
.midia-falha .midia-quadro .ic-grande { color: var(--erro); }
.midia-info { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px 8px; }
.midia-rotulo { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-13); color: var(--navy); }
.midia-meta { font-size: 11px; color: var(--texto-3); }
.midia-video .midia-quadro { background: var(--escuro-fundo); color: var(--escuro-texto-3); }
.midia-video .midia-quadro .ic-grande { color: var(--escuro-texto-3); }
.midia-video .midia-quadro .botao { color: var(--escuro-texto); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }

/* A marca do lápis: contorno laranja que se desenha ao redor do quadro. */
.marca-lapis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transform: rotate(-0.4deg); }
.marca-lapis-traco { fill: none; stroke: var(--laranja); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.midia.foco .marca-lapis-traco { opacity: 1; }
.midia.foco .marca-lapis.desenhando .marca-lapis-traco { stroke-dasharray: 400; stroke-dashoffset: 400; animation: desenhar var(--dur-4) var(--ease-chegada) forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .midia.foco .marca-lapis.desenhando .marca-lapis-traco { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }

.custodia { margin-top: 24px; max-width: 720px; }
.custodia h2 { margin-bottom: 10px; }
.custodia-lista { list-style: none; position: relative; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.custodia-lista::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--borda-forte); }
.custodia-item { position: relative; }
.custodia-ponto { position: absolute; left: -22px; top: 6px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--borda-forte); background: var(--fundo); }
.custodia-auditoria .custodia-ponto { border-color: var(--teal); }
.custodia-alerta .custodia-ponto { border-color: var(--laranja-marca); }
.custodia-revisao .custodia-ponto { border-color: var(--navy); background: var(--navy); }
.custodia-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: var(--t-13); }
.custodia-corpo strong { color: var(--texto); }
.custodia-comentario { margin-top: 4px; align-self: stretch; padding: 8px 10px; border-left: 2px solid var(--borda-forte); background: var(--superficie); color: var(--texto-2); white-space: pre-wrap; }

/* O carimbo: tipográfico, borda dupla, levemente girado. Nunca brincadeira. */
.carimbo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 12px 7px; border: 2px double currentColor; border-radius: var(--raio-2); color: var(--navy); background: transparent; mix-blend-mode: multiply; transform: rotate(-1deg); transform-origin: 50% 50%; }
.carimbo-veredito { font-weight: 800; font-size: var(--t-13); letter-spacing: 0.09em; line-height: 1.2; }
.carimbo-linha { display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.carimbo-suspeita { color: #6B4400; }
.carimbo-falso { color: var(--petroleo); }
.carimbo-inconclusivo { color: #3D4854; }
.carimbo-batendo { animation: carimbar var(--dur-5) cubic-bezier(0.2, 0.9, 0.3, 1) both; will-change: transform, opacity; }
.carimbo-batendo .carimbo-linha { animation: entrar-no-lugar var(--dur-2) var(--ease-chegada) both; animation-delay: calc(var(--dur-5) * 0.7); }
@keyframes carimbar {
  0% { opacity: 0; transform: scale(1.15) rotate(-2deg); box-shadow: 0 10px 18px rgba(11, 42, 74, 0.35); }
  14% { opacity: 1; }
  55% { transform: scale(0.985) rotate(-1deg); box-shadow: 0 1px 2px rgba(11, 42, 74, 0.15); }
  100% { transform: scale(1) rotate(-1deg); box-shadow: none; }
}

/* Barra de decisão: fixa no rodapé, passos inline, nunca modal. */
.decisao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--superficie); border-top: 1px solid var(--borda); box-shadow: 0 -4px 16px rgba(11, 42, 74, 0.08); }
.decisao-interno { max-width: var(--largura-max); margin: 0 auto; padding: 12px var(--gutter); }
.decisao-passo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; animation: entrar-no-lugar var(--dur-3) var(--ease-chegada) both; }
.decisao-esq { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.decisao-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.decisao-dir-confirmacao { flex-direction: row; align-items: center; }
.decisao-grupo { display: inline-flex; align-items: center; gap: 0; flex-wrap: wrap; }
.decisao-rotulo { margin-right: 10px; font-size: var(--t-13); font-weight: 550; color: var(--texto-2); }
.segmento { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font-weight: 550; cursor: pointer; margin-left: -1px; transition: background var(--dur-1) var(--ease-estado), color var(--dur-1) var(--ease-estado), box-shadow var(--dur-1) var(--ease-estado); }
.segmento:first-of-type { margin-left: 0; border-radius: var(--raio-2) 0 0 var(--raio-2); }
.segmento:last-of-type { border-radius: 0 var(--raio-2) var(--raio-2) 0; }
.segmento:hover { background: var(--superficie-3); color: var(--navy); z-index: 1; }
.segmento:disabled { opacity: 0.5; cursor: default; }
.segmento:focus-visible { z-index: 2; }
.segmento.ativo { z-index: 1; }
.segmento-suspeita.ativo { background: var(--suspeita-fundo); color: var(--suspeita-texto); box-shadow: inset 0 0 0 2px var(--laranja-marca); }
.segmento-falso.ativo { background: var(--duvida-fundo); color: var(--duvida-texto); box-shadow: inset 0 0 0 2px var(--teal); }
.segmento-inconclusivo.ativo { background: var(--limpo-fundo); color: var(--limpo-texto); box-shadow: inset 0 0 0 2px var(--texto-3); }
.segmento .kbd { margin-left: 2px; }
.campo-comentario { max-width: 760px; }
.campo-comentario label .mudo { font-weight: 400; }
#comentario { min-height: 44px; max-height: 160px; }
.botao-carimbar { min-width: 180px; min-height: 40px; font-size: var(--t-16); }
.decisao-nota { max-width: 32ch; text-align: right; }
.confirmar-titulo { font-size: var(--t-16); }
.confirmar-texto { max-width: 78ch; color: var(--texto-2); font-size: var(--t-13); }
.confirmar-comentario { margin: 0; padding: 4px 12px; font-size: var(--t-13); max-height: 60px; overflow: auto; border-left: 3px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto-2); white-space: pre-wrap; max-width: 70ch; }
.armando { position: relative; overflow: hidden; pointer-events: none; }
.armando::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255, 255, 255, 0.6); transform-origin: 0 50%; animation: armar 500ms linear both; }
@keyframes armar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.decisao-carimbado-esq { flex-direction: row; align-items: center; gap: 16px; }

/* ---------------------------------------------------------------- visor (câmara escura) */

.visor { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--escuro-fundo); color: var(--escuro-texto); display: none; flex-direction: column; overflow: hidden; }
.visor[open] { display: flex; }
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.visor-palco:focus-visible { outline: 2px solid var(--escuro-foco); outline-offset: -2px; }
.visor::backdrop { background: rgba(4, 14, 26, 0.92); }
.visor :focus-visible { outline-color: var(--escuro-foco); }
.visor-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 12px; background: var(--escuro-superficie); border-bottom: 1px solid var(--escuro-borda); flex: none; }
.visor-topo-esq, .visor-topo-centro, .visor-topo-dir { display: flex; align-items: center; gap: 4px; min-width: 0; }
.visor-topo-esq { gap: 10px; }
.visor-campo { font-weight: 650; }
.visor-posicao { color: var(--escuro-texto-3); font-size: var(--t-13); }
.visor-zoom { min-width: 5ch; text-align: center; font-size: var(--t-13); color: var(--escuro-texto-2); }
.botao-visor { min-height: 32px; padding: 4px 10px; background: transparent; border-color: transparent; color: var(--escuro-texto-2); font-size: var(--t-13); }
.botao-visor:hover { background: var(--escuro-superficie-2); border-color: transparent; color: var(--escuro-texto); }
.botao-visor[aria-pressed="true"] { background: var(--escuro-superficie-2); color: var(--ciano); }
.botao-visor:disabled:hover { background: transparent; color: var(--escuro-texto-2); }
.visor-corpo { position: relative; flex: 1; display: flex; align-items: stretch; min-height: 0; }
.visor-nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 64px; transform: translateY(-50%); border: 0; border-radius: var(--raio-2); background: rgba(11, 42, 74, 0.7); color: var(--escuro-texto); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-1) var(--ease-estado), opacity var(--dur-1) var(--ease-estado); }
.visor-nav:hover { background: var(--escuro-superficie-2); }
.visor-nav:disabled { opacity: 0.25; cursor: default; }
.visor-nav-esq { left: 8px; }
.visor-nav-dir { right: 8px; }
.visor-nav .ic { width: 22px; height: 22px; }
.visor-paineis { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.comparando .visor-paineis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.visor-painel { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#visor-painel-dir { display: none; border-left: 1px solid rgba(230, 237, 243, 0.25); }
.comparando #visor-painel-dir { display: flex; }
.visor-painel-rotulo { position: absolute; top: 8px; left: 56px; z-index: 1; padding: 2px 8px; border-radius: var(--raio-1); background: rgba(7, 25, 44, 0.75); color: var(--escuro-texto-2); font-size: 11px; opacity: 0; transition: opacity var(--dur-2) var(--ease-estado); }
.comparando .visor-painel-rotulo { opacity: 1; }
.painel-focado { box-shadow: inset 0 0 0 2px rgba(110, 211, 240, 0.55); }
.visor-palco { position: relative; flex: 1; overflow: hidden; cursor: grab; touch-action: none; background: var(--escuro-fundo); }
.visor-palco.arrastando { cursor: grabbing; }
.visor-imagem { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; background: #000; }
.visor-imagem.pixelado { image-rendering: pixelated; }
.visor-sk { position: absolute; inset: 15%; }
.visor-sk .sk { background: var(--escuro-superficie-2); }
.visor-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--escuro-texto-3); border: 1px dashed var(--escuro-borda); margin: 15%; }
.visor-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.visor-grade-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--ease-estado); background-image: linear-gradient(to right, rgba(110, 211, 240, 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(110, 211, 240, 0.35) 1px, transparent 1px); background-size: 33.333% 33.333%; }
.com-grade .visor-grade-overlay { opacity: 1; }
.grade-pixels .visor-grade-overlay { background-size: 10% 10%; }
.visor-faixa-miniaturas { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--escuro-superficie); border-top: 1px solid var(--escuro-borda); flex: none; overflow-x: auto; }
.visor-miniaturas { display: flex; gap: 6px; }
.visor-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 3px; border: 1px solid transparent; border-radius: var(--raio-1); background: transparent; color: var(--escuro-texto-3); font-size: 10px; cursor: pointer; }
.visor-mini img { width: 64px; height: 42px; object-fit: cover; border-radius: 2px; }
.visor-mini:hover { border-color: var(--escuro-borda); color: var(--escuro-texto); }
.visor-mini.ativa { border-color: var(--ciano); color: var(--escuro-texto); }
.visor-mini:disabled { opacity: 0.4; cursor: default; }
.visor-rodape { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px 24px; padding: 10px 16px 12px; background: var(--escuro-superficie); border-top: 1px solid var(--escuro-borda); flex: none; font-size: var(--t-13); }
.visor-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.visor-meta div { display: flex; flex-direction: column; }
.visor-meta dt { font-size: 11px; font-weight: 500; color: var(--escuro-texto-3); }
.visor-meta dd { margin: 0; color: var(--escuro-texto); }
.meta-anomalo { color: var(--laranja); font-weight: 600; }
.visor-achados { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.visor-achados li { display: flex; align-items: baseline; gap: 8px; color: var(--escuro-texto-2); }
.visor-achados .mudo { color: var(--escuro-texto-3); }
.visor .sev-media { background: transparent; color: var(--laranja); border-color: var(--laranja-marca); }
.visor .sev-baixa { background: transparent; color: var(--ciano); border-color: var(--teal-claro); }
.visor .sev-info { color: var(--escuro-texto-3); border-color: var(--escuro-borda); }
.visor-so-largo { display: inline; }

/* Player nativo sobre a blob URL: ocupa o quadro da folha e o palco do visor. */
.video { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; outline: none; }
.video:focus-visible { outline: 2px solid var(--teal-claro); outline-offset: -2px; }
.video-grande { max-width: 960px; margin: auto; }

/* ---------------------------------------------------------------- operação */

.operacao { display: flex; flex-direction: column; gap: 16px; }
.operacao.carregando { min-height: 60vh; opacity: 0.6; }
.op-faixa { display: grid; gap: 16px; align-items: start; }
.op-faixa-1 { grid-template-columns: 5fr 7fr; }
.op-faixa-2 { grid-template-columns: 1fr; }
.op-faixa-3 { grid-template-columns: 5fr 7fr; }
.op-faixa-4 { grid-template-columns: 1fr 1fr; }
.op-faixa > .cartao { padding: 16px 18px 18px; min-width: 0; }
.filtro-intervalo { display: inline-flex; }
.filtro-intervalo .segmento { min-height: 32px; padding: 4px 12px; font-size: var(--t-13); }
.filtro-intervalo .segmento.ativo { background: var(--navy); color: #fff; border-color: var(--navy); }
.op-carga-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); gap: 16px 32px; align-items: start; }
.op-carga-dir { display: flex; flex-direction: column; gap: 14px; }
.hero { display: flex; flex-direction: column; gap: 2px; }
.hero-rotulo { font-size: var(--t-13); font-weight: 550; color: var(--texto-2); }
.hero-valor { font-size: 3.5rem; font-weight: 650; line-height: 1; color: var(--navy); letter-spacing: -0.02em; }
.hero-sub { color: var(--texto-3); font-size: var(--t-13); }
.hero-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 550; text-decoration: none; }
.meter { --pct: 0%; display: flex; flex-direction: column; gap: 6px; }
.meter-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meter-rotulo { font-size: var(--t-13); font-weight: 550; color: var(--texto-2); }
.meter-valor { font-weight: 650; color: var(--navy); }
.meter-trilho { height: 8px; border-radius: 4px; background: #C7F0FE; overflow: hidden; }
.meter-fill { height: 100%; width: var(--pct); border-radius: 4px; background: var(--teal); transition: width var(--dur-4) var(--ease-chegada); }
.meter-aviso .meter-trilho { background: var(--aviso-fundo); }
.meter-aviso .meter-fill { background: var(--laranja-marca); }
.meter-critico .meter-trilho { background: var(--erro-fundo); }
.meter-critico .meter-fill { background: var(--erro); }
.meter-sub { display: flex; align-items: center; gap: 4px; font-size: var(--t-12); color: var(--texto-3); }
.meter-aviso .meter-sub, .meter-critico .meter-sub { color: var(--laranja-texto); }
.meter-critico .meter-sub { color: var(--erro); }
.op-linha { margin: 0 0 10px; font-size: var(--t-13); color: var(--texto-2); }
.op-linha strong { color: var(--navy); font-size: var(--t-16); }
.op-contagens { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.op-contagem strong { font-size: var(--t-16); color: var(--texto-2); }
.op-contagem-critico strong { color: var(--erro-texto); }
.op-contagem-serio strong { color: var(--serio); }
.op-contagem-aviso strong { color: var(--aviso-texto); }
.op-sep { color: var(--borda-forte); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tile { padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--superficie-2); }
.tile-rotulo { display: flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 550; color: var(--texto-2); }
.tile-rotulo .ic { width: 15px; height: 15px; }
.tile-valor { margin-top: 2px; font-size: var(--t-24); font-weight: 650; color: var(--navy); line-height: 1.15; }
.tile-sub { margin-top: 2px; font-size: var(--t-12); color: var(--texto-3); }
.tile-critico { border-color: var(--erro-borda); background: var(--erro-fundo); }
.tile-critico .tile-valor, .tile-critico .tile-rotulo { color: var(--erro-texto); }
.tile-serio { border-color: #F5C7B0; background: var(--serio-fundo); }
.tile-serio .tile-valor, .tile-serio .tile-rotulo { color: var(--serio); }
.tile-aviso { border-color: var(--suspeita-borda); background: var(--aviso-fundo); }
.tile-aviso .tile-valor, .tile-aviso .tile-rotulo { color: var(--aviso-texto); }
.tile-neutro .tile-valor { color: var(--texto-2); }
.worker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--t-13); color: var(--texto-2); }
.worker .ic { color: var(--texto-3); }
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: var(--t-12); font-weight: 600; }
.estado-ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-bom, .estado-ativo { background: var(--ok-fundo); color: var(--ok-texto); }
.estado-aviso, .estado-bloqueado { background: var(--aviso-fundo); color: var(--aviso-texto); }
.estado-critico { background: var(--erro-fundo); color: var(--erro-texto); }
.estado-desativado { background: var(--limpo-fundo); color: var(--limpo-texto); }
.op-ver { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 16px; align-items: start; margin-bottom: 8px; }
.nota-metodo { margin-top: 8px; font-size: var(--t-12); }
.col-barra { min-width: 140px; }
.barra-celula { position: relative; display: inline-block; width: 80px; height: 10px; margin-right: 8px; border-radius: 2px; background: var(--superficie-3); vertical-align: middle; overflow: visible; }
.barra-celula-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct); border-radius: 2px; background: var(--teal); }
.barra-celula-ref { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--texto-2); }
.barra-100 { display: inline-flex; width: 140px; height: 12px; border-radius: 2px; background: var(--superficie-3); overflow: hidden; gap: 2px; }
.barra-100-seg { height: 100%; }
.viz-s-suspeita.barra-100-seg { background: var(--laranja-serie); }
.viz-s-duvida.barra-100-seg { background: var(--teal-claro); }
.viz-s-limpo.barra-100-seg { background: #C3CAD3; }

/* Gráficos SVG (método dataviz): marcas finas, grade hairline, texto em tinta. */
.viz { margin: 0; --viz-serie: #1B7791; --viz-grid: #E6E9ED; --viz-axis: #C5CBD3; --viz-ink-1: #1B1F24; --viz-ink-2: #4A525D; --viz-ink-3: #5F6772; --viz-surface: #FFFFFF; --viz-duvida: #1E90A8; --viz-suspeita: #B47D06; --viz-limpo: #C3CAD3; --viz-ord-1: #3E9DBE; --viz-ord-2: #2F86A0; --viz-ord-3: #06596E; --viz-ord-4: #023C4B; --viz-hover-ring: rgba(11, 42, 74, 0.35); }
.viz-titulo { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); margin-bottom: 6px; text-wrap: balance; }
.viz-svg { width: 100%; height: auto; display: block; font: 11px var(--fonte); overflow: visible; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-eixo { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz-tick { fill: var(--viz-ink-3); font-variant-numeric: tabular-nums; }
.viz-rotulo { fill: var(--viz-ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-barra { fill: var(--viz-serie); transform-box: fill-box; transform-origin: bottom; }
.viz-alvo { fill: transparent; }
.viz-marca { outline: none; }
.viz-marca:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.viz-marca:hover .viz-barra, .viz-marca:focus-visible .viz-barra { filter: brightness(1.08); stroke: var(--viz-hover-ring); stroke-width: 2; }
.viz-linha { fill: none; stroke: var(--viz-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-ponto { fill: var(--viz-serie); }
.viz-anel { fill: var(--viz-surface); }
.viz-mira { stroke: var(--viz-ink-3); stroke-width: 1; }
.viz-s-duvida { --viz-serie: var(--viz-duvida); }
.viz-s-suspeita { --viz-serie: var(--viz-suspeita); }
.viz-s-limpo { --viz-serie: var(--viz-limpo); }
.viz-s-limpo .viz-barra, .viz-s-limpo.viz-barra { stroke: var(--viz-ink-3); stroke-width: 1; }
.viz-s-ord1 { --viz-serie: var(--viz-ord-1); }
.viz-s-ord2 { --viz-serie: var(--viz-ord-2); }
.viz-s-ord3 { --viz-serie: var(--viz-ord-3); }
.viz-s-ord4 { --viz-serie: var(--viz-ord-4); }
.viz-empilhado .viz-barra { stroke: var(--viz-surface); stroke-width: 2; paint-order: stroke; }
.viz-barra100 { height: 24px; border-radius: 4px; }
.viz-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 4px; font-size: var(--t-12); color: var(--texto-2); }
.viz-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.viz-chave { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--viz-serie); }
.viz-chave--linha { height: 3px; width: 16px; }
.viz-tabela { margin-top: 6px; font-size: var(--t-12); color: var(--texto-3); }
.viz-tabela summary { cursor: pointer; }
.viz-tabela table { margin-top: 6px; border-collapse: collapse; }
.viz-tabela th, .viz-tabela td { padding: 2px 10px 2px 0; text-align: left; border-bottom: 1px solid var(--borda); }
.viz-tabela th[scope="row"] { font-weight: 500; }
#viz-tip { position: absolute; top: 0; left: 0; z-index: 60; padding: 6px 8px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--raio-1); box-shadow: var(--sombra-2); pointer-events: none; font-size: var(--t-12); white-space: nowrap; }
.viz-tip-linha { display: flex; align-items: center; gap: 6px; }
.viz-tip-linha strong { font-weight: 600; }
.viz-tip-rotulo { color: var(--texto-2); }
@media (forced-colors: active) {
  .viz-barra, .viz-ponto { fill: CanvasText; }
  .viz-linha { stroke: CanvasText; }
  .viz-grid, .viz-eixo, .viz-mira { stroke: GrayText; }
}

/* ---------------------------------------------------------------- usuários */

.formulario-inline { margin-bottom: 14px; padding: 16px 18px; animation: entrar-no-lugar var(--dur-3) var(--ease-chegada) both; }
.formulario-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.tabela-usuarios .col-acoes { text-align: right; white-space: nowrap; }
.tabela-usuarios .col-acoes .botao { margin-left: 4px; }
.usuario-desativado td { color: var(--texto-3); }
.linha-confirmacao td { background: var(--superficie-2); }
.confirmacao-inline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.resultado-inline { margin-right: 8px; }

/* ---------------------------------------------------------------- transições de tela */

::view-transition-old(root) { animation: 120ms var(--ease-saida) both vt-sair; }
::view-transition-new(root) { animation: var(--dur-3) var(--ease-chegada) both vt-entrar; }
::view-transition-group(laudo-numero) { animation-duration: var(--dur-4); animation-timing-function: var(--ease-chegada); }
::view-transition-old(laudo-numero), ::view-transition-new(laudo-numero) { animation: none; mix-blend-mode: normal; height: 100%; }
@keyframes vt-sair { to { opacity: 0; } }
@keyframes vt-entrar { from { opacity: 0; transform: translateX(var(--desl-2)); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 1280px) {
  .laudo-corpo { grid-template-columns: 320px minmax(0, 1fr); }
  .col-ecv { width: 170px; } .col-veiculo { width: 170px; }
}
@media (max-width: 1024px) {
  :root { --gutter: 16px; }
  .laudo-corpo { grid-template-columns: 280px minmax(0, 1fr); }
  .folha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-faixa-1, .op-faixa-3, .op-faixa-4 { grid-template-columns: 1fr; }
  .busca-campo { width: 180px; }
  .marca-produto { display: none; }
  .col-achados { min-width: 200px; }
  .filtro-fixo { margin-left: 0; }
}
@media (max-width: 860px) {
  .laudo-corpo { grid-template-columns: 1fr; }
  .coluna-achados { position: static; max-height: none; overflow: visible; }
  .laudo-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-ecv, .col-veiculo { display: none; }
  .col-achados { min-width: 0; }
  .visor-rodape { grid-template-columns: 1fr; }
  .visor-so-largo { display: none; }
  .visor-topo { padding: 0 8px; }
  .comparando .visor-paineis { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  #visor-painel-dir { border-left: 0; border-top: 1px solid rgba(230, 237, 243, 0.25); }
  .formulario-grade { grid-template-columns: 1fr 1fr; }
  .painel-atalhos-corpo { grid-template-columns: 1fr; }
  .usuario-nome { display: none; }
  .tela-laudo { padding-bottom: 240px; }
}
@media (pointer: coarse) {
  .kbd, .dica-inline, .rodape-dicas { display: none; }
  .botao-mini, .botao-visor, .visor-mini { min-height: 40px; }
}
@media (max-width: 640px) {
  .principal { padding-top: 12px; }
  .laudo-meta dd.mono { white-space: normal; overflow-wrap: anywhere; }
  .busca-campo, .seletor, .entrada, .filtro .seletor { font-size: 16px; }
  .laudo-regua { min-width: 0; }
  .tela-laudo { overflow-x: clip; }
  .topo { gap: 6px; padding: 0 12px; overflow-x: clip; }
  .marca-topo img { height: 24px; }
  .menu { margin-left: 0; }
  .menu a { padding: 0 8px; }
  .menu a span { display: none; }
  .busca-campo { width: 118px; padding: 5px 8px 5px 30px; }
  .busca-kbd, .usuario, #botao-sair span, .acorde, #botao-atalhos { display: none; }
  .barra-tela-dir { width: 100%; }
  .tabela-fila thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .tabela-fila, .tabela-fila tbody, .tabela-fila tr { display: block; }
  .tabela-fila tbody tr.linha { display: grid; grid-template-columns: 24px 1fr auto; grid-template-areas: "cursor os veredito" "cursor veiculo veiculo" "cursor ecv ecv" "cursor achados achados" "cursor score tempo"; gap: 4px 8px; height: auto; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--borda); }
  .tabela-fila tbody tr.linha td { display: block; padding: 0; border: 0; width: auto; }
  .tabela-fila .col-cursor { grid-area: cursor; }
  .tabela-fila .col-os { grid-area: os; }
  .tabela-fila .col-veredito { grid-area: veredito; }
  .tabela-fila .col-veiculo { grid-area: veiculo; display: block; font-size: var(--t-13); }
  .tabela-fila .col-ecv { grid-area: ecv; display: block; font-size: var(--t-12); color: var(--texto-3); }
  .tabela-fila .col-score { grid-area: score; }
  .tabela-fila .col-achados { grid-area: achados; }
  .tabela-fila .col-tempo { grid-area: tempo; text-align: right; }
  .linha-sk td:nth-child(6), .linha-sk td:nth-child(7) { display: none; }
  .visor-topo { flex-wrap: wrap; height: auto; min-height: 44px; padding: 4px 8px; row-gap: 2px; }
  .visor-topo-esq { order: 1; flex: 1 1 auto; }
  .visor-topo-dir { order: 2; }
  .visor-topo-centro { order: 3; flex-basis: 100%; justify-content: center; }
  .botao-visor { min-height: 28px; padding: 3px 6px; }
  .visor-nav { width: 36px; height: 52px; }
  .visor-rodape { padding: 8px 12px 10px; gap: 8px; }
  .visor-meta { gap: 4px 12px; }
  .visor-painel-rotulo { left: 44px; }
  .linha-divisor td { padding-left: 12px; }
  .folha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laudo-cabecalho h1 { font-size: var(--t-20); }
  .laudo-regua { width: 100%; }
  .decisao-passo { grid-template-columns: 1fr; }
  .decisao-dir { align-items: stretch; }
  .decisao-grupo { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .decisao-rotulo { grid-column: 1 / -1; margin: 0 0 4px; }
  .segmento { padding: 6px 8px; font-size: var(--t-13); justify-content: center; }
  .segmento .kbd { display: none; }
  .decisao-nota { text-align: left; max-width: none; }
  .formulario-grade { grid-template-columns: 1fr; }
  .painel-atalhos { right: 8px; left: 8px; width: auto; }
  .avisos { right: 8px; left: 8px; max-width: none; }
  .op-carga-corpo { grid-template-columns: 1fr; }
  .op-ver { grid-template-columns: 1fr; }
  .login { padding: 24px 20px; }
}

/* ---------------------------------------------------------------- ECV: perfil de um cliente */
.ecv-faixa-1 { grid-template-columns: 4fr 8fr; }
.ecv-faixa-2 { grid-template-columns: 7fr 5fr; }
.ecv-faixa-3 { grid-template-columns: 7fr 5fr; }
.ecv-faixa-4 { grid-template-columns: 5fr 7fr; }
.ecv-faixa-5 { grid-template-columns: 1fr 1fr; }
.ecv-hash { font-size: var(--t-13); font-weight: 400; color: var(--texto-3); letter-spacing: 0.02em; }
.tela-ecv .barra-tela-esq .sub + .sub { margin-top: 2px; }
.tela-ecv .hero .nota-metodo { max-width: 34ch; }
.tela-ecv .tiles { margin-bottom: 0; }
.tela-ecv .tabela caption { caption-side: bottom; text-align: left; padding-top: 8px; }
.tela-ecv .linha-vazia th, .tela-ecv .linha-vazia td { color: var(--texto-3); }
.ecv-link { color: inherit; text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; }
.ecv-link:hover { color: var(--acao); text-decoration-color: currentColor; }

/* Heatmap: rampa sequencial (teal 100→700), 0 = superfície neutra. */
.viz-heat-cel { stroke: var(--viz-surface); stroke-width: 1; }
.viz-heat-cel:hover, .viz-heat-cel:focus-visible { stroke: var(--viz-hover-ring); stroke-width: 2; outline: none; }
.viz-heat-0 { fill: var(--superficie-3); }
.viz-heat-1 { fill: #D6EAF0; }
.viz-heat-2 { fill: #A5D1DE; }
.viz-heat-3 { fill: #5FAFC5; }
.viz-heat-4 { fill: #2F86A0; }
.viz-heat-5 { fill: #06596E; }
.viz-chave.viz-heat-0 { background: var(--superficie-3); border: 1px solid var(--borda); }
.viz-chave.viz-heat-1 { background: #D6EAF0; }
.viz-chave.viz-heat-2 { background: #A5D1DE; }
.viz-chave.viz-heat-3 { background: #5FAFC5; }
.viz-chave.viz-heat-4 { background: #2F86A0; }
.viz-chave.viz-heat-5 { background: #06596E; }

/* Claim suave: quem está com o laudo aberto. */
.faixa-claim { background: var(--superficie-2); border-color: var(--borda-forte); color: var(--texto-2); }
.faixa-claim .ic { color: var(--acao); }
.estado-claim { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 1px 6px; border-radius: 999px; font-size: 11px; line-height: 1.4; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borda); white-space: nowrap; }
.estado-claim .ic { color: var(--acao); }
.linha-claim .os-link { color: var(--texto-2); }
.tabela-fila .col-cursor { min-width: 24px; }
.linha-claim .col-cursor { min-width: 110px; }

/* Histórico de auditorias na cadeia de custódia. */
.custodia-historico { margin-top: 14px; padding-left: 0; }
.custodia-historico > summary { cursor: pointer; color: var(--acao); font-size: var(--t-13); font-weight: 550; }
.custodia-historico > p { margin: 8px 0 6px; }
.custodia-historico-lista { margin-top: 8px; }
.custodia-anterior .custodia-ponto { border-style: dashed; }
.custodia-achados { margin-top: 4px; font-size: var(--t-12); }
.custodia-achados summary { cursor: pointer; color: var(--acao); }
.custodia-achados ul { margin: 6px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1024px) {
  .ecv-faixa-1, .ecv-faixa-2, .ecv-faixa-3, .ecv-faixa-4, .ecv-faixa-5 { grid-template-columns: 1fr; }
}

/* =============================================================================
   Operar em produção: conta, sessões, vigilância, relatórios.
   Mesmos tokens e componentes; laranja só onde há sinal (aviso ativo, vigia parado,
   poucos casos na manchete); o resto é tinta, hairline e estado com rótulo.
   ============================================================================= */

/* ---------------------------------------------------------------- topo: a conta leva a "Minha senha" */
a.usuario { min-height: 32px; padding: 0 8px; border-left: 0; border-radius: var(--raio-2); text-decoration: none; transition: background var(--dur-1) var(--ease-estado), color var(--dur-1) var(--ease-estado); }
a.usuario .ic { color: var(--texto-3); }
a.usuario:hover { background: var(--superficie-3); color: var(--navy); }
a.usuario[aria-current="page"] { background: var(--acao-suave); color: var(--navy); }
.login .erro.login-info { border-color: var(--duvida-borda); background: var(--duvida-fundo); color: var(--duvida-texto); }
.entrada[aria-invalid="true"] { border-color: var(--erro); }

/* ---------------------------------------------------------------- estados que faltavam */
.estado .ic-pequeno { width: 12px; height: 12px; stroke-width: 2; }
.estado-serio { background: var(--serio-fundo); color: var(--serio); }
.estado-neutro { background: var(--limpo-fundo); color: var(--limpo-texto); }
.bloco { display: block; }
.visor-vazio-texto { max-width: 44ch; padding: 0 12px; text-align: center; }

/* ---------------------------------------------------------------- operação: vigilância */
.op-faixa-vigia { grid-template-columns: minmax(0, 1fr); }
.op-vigia-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.op-vigia-topo .cartao-titulo { margin: 0; }
.op-vigia-resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--t-13); color: var(--texto-2); }
.op-contagem .ic { color: currentColor; vertical-align: -0.15em; }
.op-contagem-sinal strong { color: var(--laranja-texto); }
.op-contagem-aviso { color: var(--aviso-texto); }
.op-contagem-critico { color: var(--erro-texto); }
.op-vigia-erro { align-items: center; margin-bottom: 14px; background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro-texto); font-size: var(--t-13); }
.op-vigia-erro .ic { color: var(--erro); }
.op-vigia-erro strong { color: var(--erro-texto); }
.op-vigia-erro p { flex: 1; }
.op-vigia-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 40px; align-items: start; }
.op-sub { margin: 18px 0 8px; font-size: var(--t-13); font-weight: 650; color: var(--navy); text-transform: none; letter-spacing: 0; }
.op-vigia-col > .op-sub:first-child { margin-top: 0; }

.vigia-parado { margin-bottom: 8px; background: var(--aviso-fundo); border-color: var(--suspeita-borda); color: var(--aviso-texto); font-size: var(--t-13); }
.vigia-parado .ic { color: var(--suspeita-texto-2); }
.vigia-parado strong { color: var(--aviso-texto); }
.vigia-avisos { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vigia-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--suspeita-borda); border-radius: var(--raio-2); background: var(--suspeita-fundo); color: var(--suspeita-texto); font-size: var(--t-13); }
.vigia-aviso > .ic { flex: none; margin-top: 1px; color: var(--laranja-marca); }
.vigia-aviso-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vigia-aviso-corpo strong { font-size: var(--t-14); color: var(--suspeita-texto); }
.vigia-aviso-corpo p { overflow-wrap: anywhere; }
.vigia-aviso-meta { margin-top: 2px; font-size: var(--t-12); color: var(--suspeita-texto-2); }
.vigia-vazio { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-13); color: var(--texto-2); }
.vigia-vazio .ic { margin-top: 2px; color: var(--ok); }
.vigia-vazio-incerto { color: var(--aviso-texto); }
.vigia-vazio-incerto .ic { color: var(--suspeita-texto-2); }
.vigia-critico { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; font-size: var(--t-13); font-weight: 600; color: var(--erro-texto); }
.vigia-critico .ic { margin-top: 2px; color: var(--erro); }

.op-registro { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-13); }
.op-registro > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.op-registro dt { font-size: var(--t-12); font-weight: 550; color: var(--texto-3); }
.op-registro dd { margin: 0; color: var(--texto); line-height: 1.7; overflow-wrap: anywhere; }
.op-registro dd .estado { vertical-align: 1px; }
.vigia-canal { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; white-space: nowrap; }
.vigia-canal .ic { color: var(--acao); }
.vigia-canal-off, .vigia-canal-off .ic { color: var(--texto-3); }
.vigia-nota-aviso { display: block; font-weight: 550; line-height: 1.45; color: var(--aviso-texto); }
.vigia-resolvidos, .vigia-resolvidos-vazio { margin-top: 16px; }
.vigia-resolvidos { font-size: var(--t-13); }
.vigia-resolvidos summary { cursor: pointer; font-weight: 550; color: var(--acao); }
.vigia-resolvidos ol { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-left: 12px; border-left: 1px solid var(--borda-forte); }
.vigia-resolvido-titulo { font-weight: 550; color: var(--texto-2); }
.tabela-vigia .truncar { max-width: 200px; }
.tabela-vigia td, .tabela-vigia th { white-space: nowrap; }
.tabela-vigia td.truncar { white-space: nowrap; }
.linha-apagada th, .linha-apagada td { color: var(--texto-3); }
.linha-atrasada th[scope="row"] { font-weight: 650; color: var(--aviso-texto); }
.vigia-situacao .estado + .estado { margin-left: 4px; }
.vigia-detalhe { display: block; max-width: 260px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- relatórios */
.relatorios { display: flex; flex-direction: column; gap: 16px; }
.rel-bloco { min-width: 0; padding: 16px 18px 18px; }
.rel-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.rel-cabecalho-esq { min-width: 0; }
.rel-cabecalho-esq p { margin-top: 2px; max-width: 90ch; }
.rel-cabecalho-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rel-titulo { font-size: var(--t-16); }
.rel-filtros { margin-bottom: 0; }
.rel-status { margin: -6px 0 14px; font-size: var(--t-13); color: var(--texto-2); }
.rel-status:empty { margin: 0; }
.rel-status-ok { color: var(--ok-texto); }
.rel-status-erro { color: var(--erro-texto); }
.rel-cal { display: flex; flex-direction: column; gap: 24px; }
.rel-cal.recarregando { opacity: 0.55; transition: opacity var(--dur-2) var(--ease-estado); }
.rel-esqueleto { display: flex; flex-direction: column; gap: 10px; }
.rel-ressalvas { display: flex; flex-direction: column; gap: 8px; }
.rel-ressalvas p { max-width: 120ch; font-size: var(--t-13); }
.rel-ressalva-forte { background: var(--suspeita-fundo); border-color: var(--suspeita-borda); color: var(--suspeita-texto); }
.rel-ressalva-forte .ic { color: var(--suspeita-texto-2); }
.rel-ressalva-forte strong { color: var(--suspeita-texto); }
.rel-ressalva { background: var(--amostra-fundo); border-color: var(--amostra-borda); color: var(--amostra-texto); }
.rel-ressalva .ic, .rel-ressalva strong { color: var(--amostra-texto); }
.rel-resumo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px; align-items: start; }
.rel-hero .hero-sub { margin-top: 2px; }
.rel-hero-fraco .hero-valor { color: var(--texto-2); }
.rel-hero-alerta { margin-top: 4px; font-size: var(--t-13); font-weight: 600; color: var(--laranja-texto); }
.rel-desfechos { min-width: 0; }
.rel-desfechos .viz { max-width: 680px; }
.rel-faixa-2 { display: flex; flex-direction: column; gap: 24px; }
.rel-tabela { min-width: 0; }
.rel-subtitulo { margin: 0 0 4px; font-size: var(--t-14); font-weight: 650; color: var(--navy); text-transform: none; letter-spacing: 0; }
.rel-nota { max-width: 100ch; margin-bottom: 8px; }
.tabela-calibracao th.col-ic, .tabela-calibracao td.col-ic { min-width: 280px; }
.tabela-calibracao tbody th[scope="row"] { white-space: normal; min-width: 160px; }
.linha-fraca td.num { color: var(--texto-2); }
.rel-codigo { display: flex; flex-direction: column; gap: 2px; }
.rel-codigo-nome { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 550; }
.rel-codigo-id { font-size: 11px; font-weight: 400; color: var(--texto-3); overflow-wrap: anywhere; }

/* Intervalo de confiança numa célula: trilho, marca em 50 %, faixa do intervalo, traço no observado.
   Faixa cheia (teal) sustenta leitura; faixa vazada = poucos casos (sempre com o rótulo escrito). */
.ic-celula { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.ic-barra { --ic-ini: 0%; --ic-fim: 0%; --ic-val: 0%; position: relative; display: inline-block; flex: none; width: 120px; height: 12px; }
.ic-barra::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--superficie-3); }
.ic-meio { position: absolute; left: 50%; top: 2px; width: 1px; height: 8px; background: var(--borda-forte); }
.ic-intervalo { position: absolute; left: var(--ic-ini); top: 3px; width: calc(var(--ic-fim) - var(--ic-ini)); min-width: 2px; height: 6px; border-radius: 2px; background: var(--teal); }
.ic-ponto { position: absolute; left: var(--ic-val); top: 0; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--navy); }
.ic-barra-fraca .ic-intervalo { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--limpo-ponto); }
.ic-barra-fraca .ic-ponto { background: var(--texto-2); }
.ic-barra-grande { display: block; width: 100%; max-width: 360px; height: 16px; margin: 10px 0 4px; }
.ic-barra-grande::before { top: 7px; }
.ic-barra-grande .ic-meio { top: 2px; height: 12px; }
.ic-barra-grande .ic-intervalo { top: 4px; height: 8px; }
.ic-barra-grande .ic-ponto { height: 16px; }
.ic-valor { min-width: 5ch; font-weight: 650; color: var(--navy); }
.ic-faixa { font-size: var(--t-12); color: var(--texto-3); white-space: nowrap; }
.ic-celula-fraca .ic-valor { color: var(--texto-2); }
.chip-poucos { font-size: 11px; }

.rel-amostra .rel-registro { max-width: 760px; margin-top: 6px; }
.rel-registro > div { grid-template-columns: 210px minmax(0, 1fr); }
.rel-escape { max-width: 100ch; margin-top: 12px; font-size: var(--t-13); color: var(--texto-2); }
.rel-escape > strong.num { font-size: var(--t-16); color: var(--navy); }
.rel-nota-aviso { color: var(--aviso-texto); }
.rel-como-ler { font-size: var(--t-13); color: var(--texto-2); }
.rel-como-ler summary { cursor: pointer; font-weight: 550; color: var(--acao); }
.rel-como-ler ul { display: flex; flex-direction: column; gap: 6px; max-width: 110ch; margin: 8px 0 0; padding-left: 18px; }

.tabela-relatorios td, .tabela-relatorios th { white-space: nowrap; }
.tabela-relatorios .col-acoes { text-align: right; }
.rel-cobre { font-variant-numeric: tabular-nums; }
.rel-item-tipo { font-weight: 400; color: var(--texto-3); }
.rel-baixado { margin-right: 8px; font-size: var(--t-12); color: var(--texto-3); }
.rel-baixado-ok { color: var(--ok-texto); }
.linha-erro td { background: var(--erro-fundo); color: var(--erro-texto); font-size: var(--t-13); white-space: normal; }
.linha-erro p { display: flex; align-items: flex-start; gap: 6px; }
.linha-erro .ic { margin-top: 2px; color: var(--erro); }
.relatorios .erro-bloco, .relatorios .vazio { padding: 28px 16px; }

/* ---------------------------------------------------------------- minha senha */
.senha-grade { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 380px); gap: 20px 40px; align-items: start; }
.senha-form { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.senha-form .cartao-titulo { margin: 0; }
.senha-form .entrada { width: 100%; }
.senha-ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-texto); }
.senha-ok .ic { color: var(--ok); }
.senha-ok:focus { outline: none; }
.senha-ok:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.senha-erro { padding: 8px 10px; border: 1px solid var(--erro-borda); border-radius: var(--raio-2); background: var(--erro-fundo); color: var(--erro-texto); }
.senha-nota { padding-top: 4px; font-size: var(--t-13); color: var(--texto-2); }
.senha-nota h2 { margin-bottom: 8px; font-size: var(--t-14); }
.senha-nota ul { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }

@media (max-width: 1024px) {
  .op-vigia-corpo, .rel-resumo { grid-template-columns: minmax(0, 1fr); }
  .senha-grade { grid-template-columns: minmax(0, 560px); }
}
/* Texto só para leitor de tela (position: absolute) dentro de tabela rolável: sem um ancestral
   posicionado ele escapa do recorte e alarga a página no celular. */
.tabela-rolagem, .painel-tabela { position: relative; }
.tela-usuarios .painel-tabela { overflow-x: auto; }

@media (max-width: 640px) {
  /* Topo no celular: a chave de "Minha senha" continua, só com o ícone. */
  a.usuario { display: inline-flex; min-width: 32px; padding: 0 7px; }
  a.usuario .usuario-nome, a.usuario .usuario-papel { display: none; }
  .menu a { padding: 0 6px; }
  .busca-campo { width: 100px; }
  #botao-sair { padding-left: 8px; padding-right: 8px; }
  .op-registro > div, .rel-registro > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rel-cabecalho-dir { width: 100%; }
  .rel-bloco, .senha-form { padding: 14px 12px 16px; }
}
/* Com quatro entradas no menu, abaixo de 1024 px ele fica só com os ícones. O rótulo continua
   para leitor de tela (recorte, não display: none) e o title dá a dica ao mouse. */
@media (max-width: 860px) and (min-width: 641px) {
  .busca-campo { width: 150px; }
}
@media (max-width: 1023px) {
  .menu a span { position: absolute; display: block; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 374px) {
  .topo .marca-topo { display: none; }
}