/* Conferência da Folha CFC: tokens e esqueleto do 02-UI-SPEC (o 02-06 completa os componentes). */
/* Só pesos 400 e 600; só tamanhos 14, 16, 20 e 28 px; tema claro único. */

@layer reset, base, componentes, utilitarios;

:root {
  /* Cores: dominante, secundário e acento */
  --cor-fundo: #F4F6F9;
  --cor-superficie: #FFFFFF;
  --cor-superficie-2: #E8EDF3;
  --cor-menu: #14283D;
  --cor-menu-ativo: #1F3A57;
  --cor-menu-texto: #E6ECF3;
  --cor-acento: #0B5FA5;
  --cor-acento-hover: #084A82;
  --cor-perigo: #9B1C1C;
  --cor-texto: #1A2330;
  --cor-texto-suave: #4A5565;
  --cor-borda-campo: #6B7685;
  --cor-borda: #C9D1DB;
  --cor-foco: #0B5FA5;
  --cor-foco-menu: #FFC83D;
  --cor-desabilitado-fundo: #E4E8ED;
  --cor-desabilitado-texto: #5B6573;
  --cor-linha-hover: #EEF3F8;
  /* Tons semânticos: fundo, texto e borda */
  --cor-ok-fundo: #E6F4EA;
  --cor-ok-texto: #14532D;
  --cor-ok-borda: #2E7D4F;
  --cor-aviso-fundo: #FFF4DB;
  --cor-aviso-texto: #7A4A00;
  --cor-aviso-borda: #B7791F;
  --cor-perigo-fundo: #FDECEC;
  --cor-perigo-texto: #9B1C1C;
  --cor-perigo-borda: #B42318;
  --cor-info-fundo: #E8F1FA;
  --cor-info-texto: #1F4E79;
  --cor-info-borda: #3B78B0;
  --cor-neutro-fundo: #EEF1F4;
  --cor-neutro-texto: #3F4B59;
  --cor-neutro-borda: #8A94A1;
  --cor-naolido-fundo: #F0EAF8;
  --cor-naolido-texto: #4A2C7A;
  --cor-naolido-borda: #7E57C2;
  /* Espaçamento */
  --esp-xs: 4px;
  --esp-sm: 8px;
  --esp-md: 16px;
  --esp-lg: 24px;
  --esp-xl: 32px;
  --esp-2xl: 48px;
  --esp-3xl: 64px;
  /* Dimensões de layout */
  --largura-menu: 256px;
  --altura-topo: 56px;
  --altura-alvo: 44px;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }
  h1 { font-size: 28px; font-weight: 600; line-height: 1.2; }
  h2, h3 { font-size: 20px; font-weight: 600; line-height: 1.2; }
  a { color: var(--cor-acento); text-decoration: underline; text-underline-offset: 2px; }
  a:hover { color: var(--cor-acento-hover); }
  :focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
  main:focus { outline: none; }
  .icone { width: 20px; height: 20px; flex: none; vertical-align: middle; }
  .icone--grande { width: 24px; height: 24px; }
  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    background: var(--cor-superficie-2);
    padding: 0 var(--esp-xs);
  }
  .pular-para-conteudo {
    position: absolute;
    left: var(--esp-sm);
    top: -100px;
    background: var(--cor-superficie);
    padding: var(--esp-sm) var(--esp-md);
    z-index: 10;
  }
  .pular-para-conteudo:focus { top: var(--esp-sm); }
}

@layer componentes {
  /* Esqueleto: menu lateral de 256px e coluna de conteúdo */
  .esqueleto {
    display: grid;
    grid-template-columns: var(--largura-menu) minmax(0, 1fr);
    min-height: 100vh;
  }
  .menu {
    background: var(--cor-menu);
    color: var(--cor-menu-texto);
  }
  .menu details { display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; }
  .menu-movel__resumo { display: none; }
  .menu__marca { padding: var(--esp-lg) var(--esp-md) var(--esp-md); }
  .menu__marca-nome { display: block; font-size: 20px; font-weight: 600; line-height: 1.2; color: #FFFFFF; }
  .menu__marca-sigla { display: block; font-size: 14px; font-weight: 400; color: var(--cor-menu-texto); }
  .menu__itens { display: flex; flex-direction: column; gap: var(--esp-xs); }
  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
    min-height: var(--altura-alvo);
    padding: var(--esp-sm) var(--esp-md);
    border-left: 4px solid transparent;
    color: var(--cor-menu-texto);
    font-weight: 600;
    text-decoration: none;
  }
  .menu__item:hover { background: var(--cor-menu-ativo); color: #FFFFFF; }
  .menu__item[aria-current="page"] {
    background: var(--cor-menu-ativo);
    border-left-color: var(--cor-foco-menu);
    color: #FFFFFF;
  }
  .menu :focus-visible { outline-color: var(--cor-foco-menu); }
  .menu__rodape {
    margin-top: auto;
    padding: var(--esp-md);
    font-size: 14px;
    line-height: 1.4;
    color: var(--cor-menu-texto);
  }
  .menu__rodape p + p { margin-top: var(--esp-sm); }

  .coluna { min-width: 0; display: flex; flex-direction: column; }
  .topo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--esp-md);
    flex-wrap: wrap;
    min-height: var(--altura-topo);
    padding: var(--esp-sm) var(--esp-lg);
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
  }
  .topo__usuario { display: inline-flex; align-items: center; gap: var(--esp-xs); }
  .topo__sair { margin: 0; }
  #conteudo {
    width: 100%;
    max-width: 1280px;
    padding: var(--esp-lg);
  }
  #alerta-global { margin: var(--esp-md) var(--esp-lg) 0; }
  #alerta-global .aviso { margin-bottom: 0; max-width: none; align-items: center; }
  .pagina-erro .aviso { margin: var(--esp-md) 0; }
  .pagina-erro h1 { margin-bottom: var(--esp-sm); }
  .moldura-entrada .aviso { margin: var(--esp-md) 0; }
  .cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-md);
    margin-bottom: var(--esp-lg);
  }

  /* Botão */
  .botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-sm);
    min-height: var(--altura-alvo);
    padding: var(--esp-sm) var(--esp-md);
    border: 1px solid var(--cor-acento);
    border-radius: 6px;
    background: var(--cor-acento);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .botao:hover { background: var(--cor-acento-hover); border-color: var(--cor-acento-hover); color: #FFFFFF; }
  .botao--secundario { background: var(--cor-superficie); color: var(--cor-acento); }
  .botao--secundario:hover { background: var(--cor-info-fundo); color: var(--cor-acento-hover); }
  .botao:disabled,
  .botao[aria-disabled="true"] {
    background: var(--cor-desabilitado-fundo);
    border-color: var(--cor-desabilitado-fundo);
    color: var(--cor-desabilitado-texto);
    cursor: not-allowed;
  }

  /* Selo */
  .selo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-xs);
    padding: var(--esp-xs) var(--esp-sm);
    border: 1px solid var(--cor-neutro-borda);
    border-radius: 4px;
    background: var(--cor-neutro-fundo);
    color: var(--cor-neutro-texto);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;   /* "Aprovada em ... por {login} (ciclo N)" quebra linha dentro do selo */
  }

  /* Aviso */
  .aviso {
    display: flex;
    gap: var(--esp-sm);
    align-items: flex-start;
    margin-bottom: var(--esp-md);
    padding: var(--esp-md);
    border-left: 4px solid var(--cor-neutro-borda);
    background: var(--cor-neutro-fundo);
    color: var(--cor-neutro-texto);
    overflow-wrap: anywhere;
    max-width: 72ch;
  }
  .aviso > div, .aviso > p { flex: 1 1 auto; min-width: 0; }
  .aviso__titulo { font-weight: 600; }
  .aviso__fechar { flex: none; min-height: var(--altura-alvo); }
  .aviso--ok { border-left-color: var(--cor-ok-borda); background: var(--cor-ok-fundo); color: var(--cor-ok-texto); }
  .aviso--aviso { border-left-color: var(--cor-aviso-borda); background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
  .aviso--naolido { border-left-color: var(--cor-naolido-borda); background: var(--cor-naolido-fundo); color: var(--cor-naolido-texto); }
  .aviso--perigo { border-left-color: var(--cor-perigo-borda); background: var(--cor-perigo-fundo); color: var(--cor-perigo-texto); }
  .aviso--info { border-left-color: var(--cor-info-borda); background: var(--cor-info-fundo); color: var(--cor-info-texto); }

  /* Cartão e estado vazio */
  .cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: var(--esp-md);
  }
  .estado-vazio {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: var(--esp-xl) var(--esp-lg);
  }
  .estado-vazio h2 { margin-bottom: var(--esp-sm); }
  .estado-vazio p { margin-bottom: var(--esp-md); max-width: 72ch; }

  /* Campo */
  .campo { margin-bottom: var(--esp-md); }
  .campo label { display: block; margin-bottom: var(--esp-xs); font-size: 14px; font-weight: 600; line-height: 1.4; }
  .campo input {
    width: 100%;
    min-height: var(--altura-alvo);
    padding: var(--esp-sm) var(--esp-md);
    border: 1px solid var(--cor-borda-campo);
    border-radius: 6px;
    background: var(--cor-superficie);
  }
  .campo--erro input { border-width: 2px; border-color: var(--cor-perigo-borda); }
  .campo__erro { margin-top: var(--esp-xs); font-size: 14px; line-height: 1.4; color: var(--cor-perigo-texto); }
  .apoio { margin-top: var(--esp-md); font-size: 14px; line-height: 1.4; color: var(--cor-texto-suave); }

  /* Tela de entrada: sem menu, cartão de 400px centralizado */
  .moldura-entrada {
    display: flex;
    justify-content: center;
    padding: var(--esp-3xl) var(--esp-md) var(--esp-lg);
    max-width: none;
  }
  .cartao-entrada { width: 100%; max-width: 400px; padding: var(--esp-lg); overflow-wrap: anywhere; }
  .cartao-entrada h1 { margin-bottom: var(--esp-md); }
  .marca-texto { margin-bottom: var(--esp-md); }
  .marca-texto__nome { font-size: 20px; font-weight: 600; line-height: 1.2; }
  .marca-texto__sigla { font-size: 14px; color: var(--cor-texto-suave); }
  .cartao-entrada .botao { width: 100%; }

  /* Botão de risco: só para "Descartar envio" */
  .botao--perigo { background: var(--cor-superficie); border-color: var(--cor-perigo); color: var(--cor-perigo); }
  .botao--perigo:hover { background: var(--cor-perigo-fundo); border-color: var(--cor-perigo); color: var(--cor-perigo); }

  /* Selos: ícone de 16px e texto; o tom só reforça */
  .selo .icone { width: 16px; height: 16px; }
  .selo--ok { background: var(--cor-ok-fundo); border-color: var(--cor-ok-borda); color: var(--cor-ok-texto); }
  .selo--aviso { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso-texto); }
  .selo--perigo { background: var(--cor-perigo-fundo); border-color: var(--cor-perigo-borda); color: var(--cor-perigo-texto); }
  .selo--info { background: var(--cor-info-fundo); border-color: var(--cor-info-borda); color: var(--cor-info-texto); }
  .selo--neutro { background: var(--cor-neutro-fundo); border-color: var(--cor-neutro-borda); color: var(--cor-neutro-texto); }
  .selo--naolido { background: var(--cor-naolido-fundo); border-color: var(--cor-naolido-borda); color: var(--cor-naolido-texto); }

  /* Cartões: marcador lateral de 4px e rótulo textual (a cor nunca é o único sinal) */
  .cartao--atencao { border-left: 4px solid var(--cor-aviso-borda); }
  .cartao--bloqueio { border-left: 4px solid var(--cor-perigo-borda); }
  .cartao + .cartao { margin-top: var(--esp-md); }

  /* Indicadores do painel: grade de cartões <dl> */
  .indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--esp-md);
    margin-bottom: var(--esp-lg);
  }
  .indicador {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: var(--esp-md);
  }
  .indicador--aviso { border-left: 4px solid var(--cor-aviso-borda); }
  .indicador--perigo { border-left: 4px solid var(--cor-perigo-borda); }
  .indicador dt { display: flex; align-items: center; gap: var(--esp-xs); font-size: 14px; font-weight: 600; line-height: 1.4; }
  .indicador__numero { font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .indicador__detalhe { font-size: 14px; line-height: 1.4; color: var(--cor-texto-suave); }
  .indicador__risco { margin-top: var(--esp-sm); }

  /* Tabela: números à direita, cabeçalho fixo só na variante .tabela--fixa em telas largas */
  .regiao-rolavel { overflow-x: auto; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 8px; }
  .tabela { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; }
  .tabela caption { padding: var(--esp-sm) var(--esp-md); text-align: left; font-size: 14px; font-weight: 600; }
  .tabela th, .tabela td { padding: var(--esp-sm) var(--esp-md); border-bottom: 1px solid var(--cor-borda); text-align: left; vertical-align: top; }
  .tabela th { background: var(--cor-superficie-2); font-weight: 600; }
  .tabela td { font-weight: 400; }
  .tabela tbody tr:hover { background: var(--cor-linha-hover); }
  .tabela .num, .tabela th.num { text-align: right; }
  .tabela--fixa { min-width: 72rem; }
  .regiao-rolavel--limitada { max-height: 24rem; overflow-y: auto; }

  /* Lista de descrição em duas colunas */
  .dl-grade { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: var(--esp-sm) var(--esp-md); }
  .dl-grade dt { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--cor-texto-suave); }
  .dl-grade dd { overflow-wrap: anywhere; }

  /* Campo: ajuda e seleção */
  .campo__ajuda { margin-top: var(--esp-xs); font-size: 14px; line-height: 1.4; color: var(--cor-texto-suave); }
  input[type="radio"], input[type="checkbox"] { accent-color: var(--cor-acento); }

  /* Resumo de erros: recebe foco ao aparecer */
  .resumo-erros {
    margin-bottom: var(--esp-md);
    padding: var(--esp-md);
    border-left: 4px solid var(--cor-perigo-borda);
    background: var(--cor-perigo-fundo);
    color: var(--cor-perigo-texto);
    max-width: 72ch;
  }
  .resumo-erros ul { margin-top: var(--esp-sm); padding-left: var(--esp-lg); list-style: disc; }
  .resumo-erros a { color: var(--cor-perigo-texto); }

  /* Escolha do perfil ativo: um cartão-radio por perfil, empilhado em coluna única */
  .grupo-perfis { border: 0; margin: 0 0 var(--esp-md); padding: 0; max-width: 72ch; }
  .grupo-perfis legend { margin-bottom: var(--esp-sm); font-size: 16px; font-weight: 600; }
  .cartao-perfil {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-md);
    min-height: 44px;
    margin-bottom: var(--esp-sm);
    padding: var(--esp-md);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-campo);
    border-radius: 8px;
    cursor: pointer;
  }
  .cartao-perfil:has(input:checked) { border-width: 2px; border-color: var(--cor-acento); padding: calc(var(--esp-md) - 1px); }
  .cartao-perfil input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
  .cartao-perfil__nome { display: block; font-weight: 600; }
  .cartao-perfil__descricao { display: block; color: var(--cor-texto-suave); }

  /* Etapas do assistente de nova conferência */
  .etapas { display: flex; flex-wrap: wrap; gap: var(--esp-md); margin-bottom: var(--esp-lg); font-size: 14px; line-height: 1.4; }
  .etapas li { padding: var(--esp-xs) 0; border-bottom: 4px solid transparent; }
  .etapas [aria-current="step"], .etapas li[aria-current="step"] {
    color: var(--cor-acento);
    font-weight: 600;
    border-bottom-color: var(--cor-acento);
  }

  /* Migalhas e linha de ações do assistente */
  .migalhas { display: flex; flex-wrap: wrap; gap: var(--esp-sm); margin-bottom: var(--esp-md); font-size: 14px; line-height: 1.4; }
  .migalhas li + li::before { content: "/"; margin-right: var(--esp-sm); color: var(--cor-texto-suave); }
  .acoes { display: flex; flex-wrap: wrap; gap: var(--esp-md); margin-top: var(--esp-md); }

  /* Indicador de andamento do HTMX: oculto, visível durante a requisição */
  .htmx-indicator { display: none; align-items: center; gap: var(--esp-sm); }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }
  .htmx-indicator::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--cor-borda);
    border-top-color: var(--cor-acento);
    border-radius: 50%;
    animation: giro 1s linear infinite;
  }
  @keyframes giro { to { transform: rotate(360deg); } }

  /* Visualizador de página do PDF */
  #visualizador-pagina {
    min-height: 8rem;
    padding: var(--esp-md);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    overflow: auto;
  }
  #visualizador-pagina img { display: block; max-width: 100%; height: auto; }

  /* Texto corrido e números */
  .texto-longo { max-width: 72ch; }
  .num, .indicador__numero { font-variant-numeric: tabular-nums; }
  .hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }
  .pagina-erro .botao { margin-top: var(--esp-sm); }
}

@layer utilitarios {
  .so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Abaixo de 900px o menu vira bloco recolhível no topo */
  @media (max-width: 899px) {
    .esqueleto { grid-template-columns: minmax(0, 1fr); }
    .menu details { min-height: 0; position: static; }
    .menu-movel__resumo {
      display: flex;
      align-items: center;
      gap: var(--esp-sm);
      min-height: var(--altura-alvo);
      padding: var(--esp-sm) var(--esp-md);
      font-weight: 600;
      cursor: pointer;
    }
    .topo { justify-content: flex-start; }
  }

  /* Abaixo de 600px: uma coluna, botões de largura total */
  @media (max-width: 599px) {
    .cabecalho-pagina { flex-direction: column; align-items: stretch; }
    .botao { width: 100%; }
    .indicadores { grid-template-columns: minmax(0, 1fr); }
    .dl-grade { grid-template-columns: minmax(0, 1fr); }
    #conteudo { padding: var(--esp-md); }
  }

  /* Telas largas (1200px ou mais): cabeçalho de tabela fixo na variante .tabela--fixa */
  @media (min-width: 1200px) {
    .tabela--fixa thead th { position: sticky; top: 0; z-index: 1; }
  }

  /* Sem animação: o giro do indicador vira texto estático */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .htmx-indicator::before { content: "…"; width: auto; height: auto; border: 0; border-radius: 0; }
  }
}

/* Lista de execuções (02-12): o rótulo do arquivo ocupa uma linha, com reticências; o texto inteiro fica no painel. */
.rotulo-truncado { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Plano 02-13: visualizador de página (contêiner rolável focável) */
@layer componentes {
  .regiao-imagem { max-height: 80vh; overflow: auto; border: 1px solid var(--cor-borda); border-radius: 6px; margin: var(--esp-sm) 0 var(--esp-md); }
  #visualizador-pagina figcaption { font-weight: 600; }
}

/* Plano 02-13: comparação informado x recalculado (fundos e cabeçalhos distintos além do texto e do ícone) e alertas */
@layer componentes {
  .tabela .col-informado { background: var(--cor-superficie); }
  .tabela .col-recalculado { background: #F2F7FC; }
  .tabela th.col-recalculado { background: #DCE8F4; }
  .tabela th .apoio-celula, .tabela td .apoio-celula { display: block; font-weight: 400; }
  .apoio-celula { margin-top: var(--esp-xs); font-size: 14px; line-height: 1.4; color: var(--cor-texto-suave); }
  .tabela .texto-quebra { overflow-wrap: anywhere; min-width: 12rem; }
  .lista-alertas { display: grid; gap: var(--esp-md); margin-top: var(--esp-sm); }
  .alerta__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-sm); margin-bottom: var(--esp-sm); }
  .alerta__origem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-sm); margin-top: var(--esp-sm); }
  .texto-original {
    max-width: 72ch;
    margin: var(--esp-xs) 0 0;
    padding: var(--esp-sm) var(--esp-md);
    background: var(--cor-superficie-2);
    border-left: 4px solid var(--cor-borda-campo);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .secao-recibo { margin-top: var(--esp-lg); }
}

/* Fase 3 (plano 03-03): componentes do 03-UI-SPEC. Só os tamanhos 14/16/20/28 px, os pesos 400/600 e as cores já definidas em :root. */
@layer componentes {
  /* Campos de seleção e de texto multilinha: mesmo contrato de .campo input */
  .campo select,
  .campo textarea {
    width: 100%;
    min-height: var(--altura-alvo);
    padding: var(--esp-sm) var(--esp-md);
    border: 1px solid var(--cor-borda-campo);
    border-radius: 6px;
    background: var(--cor-superficie);
  }
  .campo textarea { min-height: 6rem; resize: vertical; }
  .campo--erro select,
  .campo--erro textarea { border-width: 2px; border-color: var(--cor-perigo-borda); }

  /* Campo com unidade (R$, %) à direita */
  .campo-unidade { display: flex; align-items: center; gap: var(--esp-sm); }
  .campo-unidade input { flex: 1 1 auto; min-width: 0; }
  .campo__unidade { flex: none; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--cor-texto-suave); }

  /* Campos em linha (faixas do editor) */
  .campos-em-linha { display: flex; flex-wrap: wrap; gap: var(--esp-sm) var(--esp-md); }
  .campos-em-linha .campo { margin-bottom: 0; }

  /* Formulário de filtro */
  .filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--esp-md); align-items: end; }
  .filtros .campo { margin-bottom: 0; }
  .filtros .acoes { grid-column: 1 / -1; margin-top: 0; }

  /* Paginador */
  .paginador { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-md); margin-top: var(--esp-md); }
  .paginador__posicao { font-size: 14px; font-weight: 600; line-height: 1.4; }

  /* Bloco de memória de cálculo */
  .memoria {
    margin-top: var(--esp-md);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
  }
  .memoria__resumo,
  .grupo-alertas > summary,
  .revisao > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-sm);
    min-height: var(--altura-alvo);
    padding: var(--esp-sm) var(--esp-md);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
  }
  .memoria__resumo::-webkit-details-marker,
  .grupo-alertas > summary::-webkit-details-marker,
  .revisao > summary::-webkit-details-marker { display: none; }
  /* Indicador de aberto/fechado feito só com bordas (sem texto para o leitor de tela) */
  .memoria__resumo::before,
  .grupo-alertas > summary::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }
  .memoria[open] > .memoria__resumo::before,
  .grupo-alertas[open] > summary::before { transform: rotate(45deg); }
  .memoria > :not(summary) { padding: var(--esp-md); }
  .memoria > .regiao-rolavel { margin: var(--esp-md); padding: 0; }
  .tabela--memoria { min-width: 44rem; }
  .tabela tr.linha-total th,
  .tabela tr.linha-total td { font-size: 14px; font-weight: 600; border-top: 2px solid var(--cor-texto); }
  .memoria__resultado { margin-top: var(--esp-md); }

  /* Revisão de alerta: o resumo parece um botão secundário */
  .revisao { margin-top: var(--esp-md); }
  .revisao > summary {
    display: inline-flex;
    border: 1px solid var(--cor-acento);
    border-radius: 6px;
    background: var(--cor-superficie);
    color: var(--cor-acento);
  }
  .revisao > summary:hover { background: var(--cor-info-fundo); color: var(--cor-acento-hover); }
  .revisao[open] > summary { margin-bottom: var(--esp-md); }

  /* Histórico e linha do tempo (evento mais recente primeiro) */
  .historico { margin-top: var(--esp-md); }
  .linha-do-tempo {
    display: grid;
    gap: var(--esp-md);
    margin-left: var(--esp-sm);
    padding-left: var(--esp-md);
    border-left: 4px solid var(--cor-borda);
  }
  .linha-do-tempo__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-sm);
    margin-bottom: var(--esp-sm);
    font-size: 14px;
    line-height: 1.4;
  }

  /* Texto escrito pela pessoa (justificativa, observações, evidência), distinto do texto do sistema */
  .texto-digitado {
    max-width: 72ch;
    margin: var(--esp-xs) 0 0;
    padding: var(--esp-sm) var(--esp-md);
    background: var(--cor-info-fundo);
    border-left: 4px solid var(--cor-info-borda);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .texto-quebra { overflow-wrap: anywhere; max-width: 72ch; }

  /* Grupo de alertas e contagens por situação */
  .grupo-alertas {
    margin-top: var(--esp-md);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
  }
  .grupo-alertas > summary h2 { margin: 0; }
  .grupo-alertas > :not(summary) { padding: var(--esp-md); }
  .contagens-situacao { display: flex; flex-wrap: wrap; gap: var(--esp-sm); }

  /* Tabela de diferenças entre versões: linha alterada com traço de 4px e valor B em 600 */
  .tabela--diff tr.linha-alterada th { border-left: 4px solid var(--cor-aviso-borda); }
  .tabela--diff tr.linha-alterada td:nth-last-child(2) { font-weight: 600; }

  /* Selo que pode quebrar linha (coluna de situação geral) */
  .tabela .selo,
  .selo--quebra { white-space: normal; text-align: left; }

  /* Cabeçalho e rodapé de impressão e conteúdo só de impressão: ocultos na tela (print.css os mostra) */
  .cabecalho-impressao,
  .rodape-impressao,
  .so-impressao { display: none; }

  /* Menu lateral: bloco da execução (D-28) */
  .menu__grupo {
    padding: var(--esp-sm) var(--esp-md) var(--esp-xs);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cor-menu-texto);
  }
  .menu__submenu { display: flex; flex-direction: column; gap: var(--esp-xs); }
  .menu__item--filho { padding-left: var(--esp-xl); min-height: var(--altura-alvo); }
  .menu__contagem {
    margin-left: auto;
    padding: 0 var(--esp-sm);
    border: 1px solid var(--cor-menu-texto);
    border-radius: 4px;
    background: var(--cor-menu-texto);
    color: var(--cor-menu);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }
}

@layer utilitarios {
  @media print {
    .so-tela { display: none !important; }
    .so-impressao,
    .cabecalho-impressao,
    .rodape-impressao { display: block; }
  }
}

/* Fase 4 (plano 04-02): componentes do 04-UI-SPEC da revisão analítica (D-21). Só os tamanhos 14/16/20/28 px,
   os pesos 400/600 e as cores já definidas em :root; nenhum `style=` no HTML nem no SVG (CSP `style-src 'self'`). */
@layer componentes {
  /* Abas: links de página inteira (sem role="tab"); a atual deixa de parecer link */
  .abas { margin-bottom: var(--esp-md); border-bottom: 1px solid var(--cor-borda); }
  .abas ul { display: flex; flex-wrap: wrap; gap: var(--esp-xs); }
  .aba {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-xs);
    min-height: var(--altura-alvo);
    padding: var(--esp-sm) var(--esp-md);
    border-bottom: 4px solid transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
  }
  .aba[aria-current="page"] {
    color: var(--cor-texto);
    border-bottom: 4px solid var(--cor-menu);
    text-decoration: none;
  }
  .aba[aria-current="page"]:hover { color: var(--cor-texto); }

  /* Tabela de comparação: mais larga que a tabela fixa; o cabeçalho fixo em telas largas está em @layer utilitarios */
  .tabela--analitica { min-width: 84rem; }
  .celula-delta,
  .celula-media { display: flex; flex-direction: column; gap: var(--esp-xs); }
  .celula-delta .icone,
  .celula-media .icone { width: 16px; height: 16px; }
  /* O peso 600 marca a regra que disparou; nunca itálico, nunca 500/700 */
  .celula-delta strong,
  .celula-media strong { font-weight: 600; }
  .regras { display: flex; flex-direction: column; gap: var(--esp-xs); list-style: none; }
  .contagem-linhas { margin: 0 0 var(--esp-sm); font-size: 14px; font-weight: 400; line-height: 1.4; }

  /* Textos longos dos avisos e dos motivos de atipicidade */
  .aviso li,
  .texto-motivos { max-width: 72ch; overflow-wrap: anywhere; }

  /* Campo de motivos: fieldset com caixas em coluna, cada uma com alvo de 44px */
  fieldset.campo { min-width: 0; margin: 0 0 var(--esp-md); padding: 0; border: 0; }
  fieldset.campo legend { padding: 0; margin-bottom: var(--esp-xs); font-size: 14px; font-weight: 600; line-height: 1.4; }
  fieldset.campo label {
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
    min-height: var(--altura-alvo);
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
  }
  fieldset.campo input[type="checkbox"] { flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; }

  /* Gráfico: <figure> com legenda visível, região rolável com o SVG e legenda em HTML */
  .grafico { display: flex; flex-direction: column; gap: var(--esp-sm); min-width: 0; }
  .grafico figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-xs) var(--esp-md);
  }
  .grafico .regiao-rolavel { border: 0; border-radius: 0; }
  .grafico-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(37rem, 1fr));
    gap: var(--esp-md);
  }
  .grafico__svg { display: block; width: 100%; min-width: 35rem; height: auto; }
  .grafico__svg--cascata { min-width: 50rem; }
  .grafico__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-sm) var(--esp-md);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }
  .grafico__legenda li { display: inline-flex; align-items: center; gap: var(--esp-xs); }
  .grafico__legenda svg { flex: none; width: 16px; height: 16px; }

  /* Partes do SVG: só fill, stroke, stroke-width, stroke-dasharray e font-* (geometria vai em atributos).
     Barras de padrão (--atipica, --nao-lido, --residuo) são um <rect> de sobreposição SEM a classe base,
     para o fill="url(#padrao-...)" do atributo não ser vencido pelo fill da classe. */
  .grafico__barra { fill: var(--cor-neutro-borda); stroke: var(--cor-texto-suave); stroke-width: 1px; }
  .grafico__barra--atual { fill: var(--cor-menu); }
  .grafico__barra--provisoria {
    fill: var(--cor-superficie);
    stroke-width: 2px;
    stroke-dasharray: 4 2;
  }
  .grafico__barra--atual.grafico__barra--provisoria { stroke: var(--cor-menu); }
  .grafico__barra--atipica { stroke: var(--cor-texto-suave); stroke-width: 1px; }
  .grafico__barra--delta { fill: var(--cor-superficie-2); stroke: var(--cor-texto); stroke-width: 2px; }
  .grafico__barra--nao-lido { stroke: var(--cor-naolido-borda); stroke-width: 2px; }
  .grafico__barra--residuo { stroke: var(--cor-aviso-borda); stroke-width: 2px; }
  .grafico__padrao { fill: none; stroke: var(--cor-texto-suave); stroke-width: 1px; }
  .grafico__media { fill: none; stroke: var(--cor-texto-suave); stroke-width: 2px; stroke-dasharray: 6 4; }
  .grafico__faixa { fill: var(--cor-info-fundo); stroke: var(--cor-info-borda); stroke-width: 1px; stroke-dasharray: 4 2; }
  .grafico__grade { fill: none; stroke: var(--cor-borda); stroke-width: 1px; }
  .grafico__eixo { fill: none; stroke: var(--cor-borda-campo); stroke-width: 1px; }
  .grafico__conector { fill: none; stroke: var(--cor-borda-campo); stroke-width: 1px; }
  .grafico__texto { fill: var(--cor-texto); font-size: 14px; font-weight: 400; }
  .grafico__texto--forte { font-weight: 600; }
  /* Ícones do sprite dentro do SVG (<use>) desenham em currentColor; por isso `color`, e não `stroke` */
  .grafico__marcador { color: var(--cor-texto); }
}

@layer utilitarios {
  /* Telas largas: cabeçalho fixo também na tabela analítica (mesmo contrato de .tabela--fixa) */
  @media (min-width: 1200px) {
    .tabela--analitica thead th { position: sticky; top: 0; z-index: 1; }
  }
}