/* sysadmin — componentes da família (Central, Navega, Guarda).

   Usa os tokens de sysadmin-tokens.css, que vem antes desta folha. Os nomes das classes são os que
   a Central e o Navega já usam (topo, lateral, item-menu, tabela, etiqueta, alerta, botao…): aplicar
   o design system num produto é trocar a folha, não reescrever as telas. O que é só de um produto
   (a linha do tempo do SQL na Central, a configuração do Squid no Navega) fica na folha dele, depois
   desta.

   Sem framework, sem CDN e sem aninhamento de CSS: a página carrega igual numa VPS sem saída para a
   internet e em qualquer navegador que o cliente tiver. */

/* --- Fontes --------------------------------------------------------------------------------
   IBM Plex (SIL OFL 1.1), servida pelo próprio produto. Só o conjunto latino, que cobre o
   português e o "ı" sem pingo do nome. A Sans é variável: um arquivo para os pesos 400 a 600. */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fontes/ibm-plex-sans.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fontes/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fontes/ibm-plex-mono-500.woff2") format("woff2");
}

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

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: var(--tam-texto)/1.5 var(--fonte);
    /* Coluna da altura da janela: o rodapé desce até o fim da tela em página curta, sem posição fixa. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--acao); }

h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
    font-size: var(--tam-titulo);
    font-weight: var(--peso-titulo, 650);
}
h2 { margin: 28px 0 10px; font-size: var(--tam-titulo-secao); font-weight: 600; }

.apoio { color: var(--texto-apoio); font-size: var(--tam-apoio); }

code, .mono {
    font-family: var(--fonte-mono);
    font-size: 12.5px;
}
code {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio-codigo);
    padding: 1px 5px;
}

/* Foco visível em tudo que recebe teclado: o anel no azul da família, por fora do elemento. */
:focus-visible {
    outline: 2px solid var(--acao);
    outline-offset: 2px;
}

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pular-para-conteudo {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 40;
    padding: 8px 14px;
    border-radius: var(--raio-campo);
    background: var(--acao);
    color: var(--acao-texto);
    font-weight: 600;
    text-decoration: none;
}
.pular-para-conteudo:focus { top: 12px; }

/* --- A marca: símbolo, nome e "por stack it" ------------------------------------------------
   Em linha: o símbolo do produto, "sysadmin" em 600 e o nome do produto em 400, os dois na tinta,
   no mesmo tamanho e na mesma linha de base; "por stack it" embaixo, pequeno, no petróleo. O i de
   "sysadmin" é um "ı" sem pingo (U+0131) com o pingo desenhado no verde conferido, para a cor
   seguir o tema. O leitor de tela lê o rótulo do conjunto, nunca as letras soltas nem o desenho. */

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

.marca-simbolo { display: block; flex-shrink: 0; }
.marca-simbolo .caminho { stroke: var(--marca-produto); }
.marca-simbolo .tinta { fill: var(--tinta); }
.marca-simbolo .tinta-traco { stroke: var(--tinta); }
.marca-simbolo .meio { fill: var(--superficie); stroke: var(--tinta); }
.marca-simbolo .fim { fill: var(--conferido); }
.marca-simbolo .visto { stroke: var(--superficie); }

.marca-texto { display: inline-flex; flex-direction: column; gap: 3px; }

.marca-linha {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28em;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--tinta);
}
.marca-nome { font-weight: 600; }
.marca-produto-nome { font-weight: 400; }

.marca-i { position: relative; display: inline-block; }
.marca-pingo {
    position: absolute;
    left: 50%;
    top: 0.02em;
    width: 0.21em;
    height: 0.21em;
    margin-left: -0.105em;
    border-radius: 50%;
    background: var(--conferido);
}

.por-stackit {
    font-size: 0.5em;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--stackit);
    white-space: nowrap;
}
.marca-texto .por-stackit { font-size: 11.5px; }

/* --- Estrutura: topo, lateral, conteúdo, rodapé ---------------------------------------------
   A régua do topo é o acento do produto: o gesto de identidade mais forte que cabe sem competir
   com nada. Todo o resto que é "ação" (botão, link, foco, item ativo) é o azul da família. */

.topo {
    position: sticky;
    top: 0;
    z-index: 30; /* acima das dicas e menus das telas (até 20); abaixo só do Pular para o conteúdo */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--medida-topo);
    padding: 0 24px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    border-top: var(--medida-regua) solid var(--marca-produto);
}
.topo-esquerda, .topo-direita { display: flex; align-items: center; gap: 18px; }
.topo .marca-linha { font-size: 21px; }

.usuario-atual {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-apoio);
    font-size: var(--tam-apoio);
    text-decoration: none;
}
.usuario-atual:hover { color: var(--acao); }

.corpo { display: flex; align-items: flex-start; flex: 1; }

.lateral {
    position: sticky;
    top: var(--medida-topo);
    flex: 0 0 var(--medida-lateral);
    width: var(--medida-lateral);
    max-height: calc(100vh - var(--medida-topo));
    overflow-y: auto;
    padding: 16px 12px 40px;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
}

.grupo-menu + .grupo-menu { margin-top: 20px; }

.titulo-grupo {
    margin: 0 0 6px;
    padding: 0 10px;
    font-size: var(--tam-rotulo);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-apoio);
}

.item-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1px;
    padding: 8px 10px;
    border-radius: var(--raio-campo);
    color: var(--texto);
    font-size: var(--tam-tabela);
    line-height: 1.3;
    text-decoration: none;
}
.item-menu:hover { background: var(--fundo); }
.item-menu[aria-current="page"] {
    background: var(--acao-fundo);
    color: var(--acao-tinta);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--acao);
}
.item-menu[aria-current="page"] .icone { color: var(--acao); }

.icone {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--texto-apoio);
}
.item-menu:hover .icone { color: var(--texto); }

.rotulo-menu {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.botao-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: transparent;
    color: var(--texto-apoio);
    cursor: pointer;
}
.botao-menu:hover { color: var(--texto); border-color: var(--acao); }

/* Recolhido: só os ícones. */
html.menu-recolhido .lateral {
    flex-basis: var(--medida-lateral-recolhida);
    width: var(--medida-lateral-recolhida);
    padding-left: 8px;
    padding-right: 8px;
}
html.menu-recolhido .rotulo-menu,
html.menu-recolhido .titulo-grupo { display: none; }
html.menu-recolhido .item-menu { position: relative; justify-content: center; padding-left: 8px; padding-right: 8px; }
html.menu-recolhido .grupo-menu + .grupo-menu { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); }
html.menu-recolhido .contador { position: absolute; transform: translate(12px, -10px); min-width: 16px; padding: 0 4px; font-size: 10px; }

.conteudo {
    flex: 1;
    min-width: 0;
    max-width: var(--medida-conteudo);
    margin-inline: auto;
    padding: 28px 28px 60px;
}

.rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 18px 24px;
    background: var(--superficie);
    border-top: 1px solid var(--borda);
    color: var(--texto-apoio);
    font-size: 12.5px;
    text-align: center;
}
.rodape strong { color: var(--texto); font-weight: 600; letter-spacing: -0.01em; }
.rodape .por-stackit { font-size: 12.5px; }
.rodape-separador { opacity: .5; }

/* --- Navegação dentro da página ------------------------------------------------------------ */

.trilha { margin-bottom: 14px; font-size: var(--tam-apoio); color: var(--texto-apoio); }
.trilha a { color: var(--acao); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }

.link-forte { color: var(--texto); font-weight: 600; text-decoration: none; }
.link-forte:hover { color: var(--acao); text-decoration: underline; }

.cabecalho-com-acao {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 14px; }
.filtro {
    padding: 5px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    color: var(--texto-apoio);
    font-size: var(--tam-apoio);
    text-decoration: none;
}
.filtro:hover { color: var(--texto); }
.filtro.ativo,
.filtro[aria-current="true"] {
    background: var(--acao);
    border-color: var(--acao);
    color: var(--acao-texto);
}

/* Abas: por assunto, com rótulo técnico curto. A ativa leva sublinhado, não só a cor. */
.abas {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 18px 0 16px;
    border-bottom: 1px solid var(--borda);
}
.aba {
    padding: 9px 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--texto-apoio);
    font-size: var(--tam-tabela);
    text-decoration: none;
    white-space: nowrap;
}
.aba:hover { color: var(--texto); }
.aba[aria-current="page"] {
    border-bottom-color: var(--acao);
    color: var(--texto);
    font-weight: 600;
}

/* Paginação: páginas com endereço próprio (um link por página), nunca rolagem infinita. */
.paginacao {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    font-size: var(--tam-apoio);
}
/* Os números de página levam a classe .pagina, para não pegar link de outro tipo dentro da faixa. */
.paginacao .pagina {
    min-width: 32px;
    padding: 5px 9px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--superficie);
    color: var(--texto);
    text-align: center;
    text-decoration: none;
}
.paginacao a.pagina:hover { border-color: var(--acao); color: var(--acao); }
.paginacao .pagina[aria-current] { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); font-weight: 600; }
.paginacao .resumo { margin-left: auto; color: var(--texto-apoio); }

/* --- Tabela -------------------------------------------------------------------------------- */

.tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
    font-size: var(--tam-tabela);
}
.tabela th {
    padding: 10px 14px;
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    color: var(--texto-apoio);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}
.tabela td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--fundo); }
.tabela .numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rolagem { overflow-x: auto; }

/* --- Etiquetas: gravidade, situação no fluxo e neutras ---------------------------------------
   Toda etiqueta traz o nome escrito: a cor nunca é a única portadora da informação. O texto usa a
   tinta do estado (fechada até 4,5:1 sobre o fundo dela); a cor do estado fica para o que é gráfico. */

.etiqueta {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--raio-pilula);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sev-critico, .etiqueta-critico { background: var(--critico-fundo); color: var(--critico-tinta); }
.sev-erro,    .etiqueta-erro    { background: var(--erro-fundo);    color: var(--erro-tinta); }
.sev-aviso,   .etiqueta-aviso   { background: var(--aviso-fundo);   color: var(--aviso-tinta); }
.sev-ok,      .etiqueta-ok      { background: var(--ok-fundo);      color: var(--ok-tinta); }

.sev-critico-texto { color: var(--critico-tinta); font-weight: 600; }
.sev-erro-texto    { color: var(--erro-tinta);    font-weight: 600; }
.sev-aviso-texto   { color: var(--aviso-tinta);   font-weight: 600; }
.sev-ok-texto      { color: var(--ok-tinta);      font-weight: 600; }

/* Situação no fluxo executar → registrar → validar: outra dimensão que a gravidade ("em que
   ponto está" x "quão grave é"), por isso Em tratamento é azul e Resolvida é neutra. */
.sit-aberta     { background: var(--critico-fundo); color: var(--critico-tinta); }
.sit-tratamento { background: var(--acao-fundo);    color: var(--acao-tinta); }
.sit-validacao  { background: var(--aviso-fundo);   color: var(--aviso-tinta); }
.sit-validada   { background: var(--ok-fundo);      color: var(--ok-tinta); }
.sit-devolvida  { background: var(--erro-fundo);    color: var(--erro-tinta); }
.sit-resolvida, .etiqueta-neutra {
    background: var(--fundo);
    border: 1px solid var(--borda);
    color: var(--texto-apoio);
}
.etiqueta-simulacao {
    background: var(--fundo);
    border: 1px dashed var(--borda);
    color: var(--texto-apoio);
}

/* Guarda: os três estados de uma cópia. Só o restore conferido é verde; os dois primeiros são
   passos do caminho, não prova de que a cópia volta. */
.passo-backup, .passo-integridade {
    background: var(--fundo);
    border: 1px solid var(--borda);
    color: var(--texto);
}
.passo-backup::before, .passo-integridade::before, .passo-restore::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: 1px;
}
.passo-backup::before { border: 1.5px solid var(--texto-apoio); width: 4px; height: 4px; }
.passo-integridade::before { background: var(--texto-apoio); }
.passo-restore { background: var(--ok-fundo); color: var(--ok-tinta); }
.passo-restore::before { background: var(--ok); }

.contador {
    display: inline-block;
    min-width: 18px;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: var(--raio-pilula);
    background: var(--critico);
    color: #fff;
    font-size: var(--tam-rotulo);
    font-weight: 700;
    text-align: center;
}

/* --- Blocos -------------------------------------------------------------------------------- */

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 18px 0;
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
}
.ficha dt { margin-bottom: 3px; color: var(--texto-apoio); font-size: 12px; }
.ficha dd { margin: 0; font-size: var(--tam-tabela); }

/* Alertas: a borda à esquerda é a cor do estado; o texto é a tinta da página, legível em qualquer
   tema. O título do alerta diz o que é; o texto, o próximo passo. */
.alerta {
    margin: 14px 0;
    padding: 11px 14px;
    border-left: 3px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    color: var(--texto);
    font-size: var(--tam-tabela);
}
.alerta strong:first-child { display: block; margin-bottom: 2px; }
.alerta-critico, .alerta-erro { background: var(--critico-fundo); border-left-color: var(--critico); }
.alerta-critico strong:first-child, .alerta-erro strong:first-child { color: var(--critico-tinta); }
.alerta-atencao, .alerta-info { background: var(--aviso-fundo); border-left-color: var(--aviso); }
.alerta-atencao strong:first-child, .alerta-info strong:first-child { color: var(--aviso-tinta); }
.alerta-ok, .alerta-concluido { background: var(--ok-fundo); border-left-color: var(--ok); }
.alerta-ok strong:first-child, .alerta-concluido strong:first-child { color: var(--ok-tinta); }
.alerta-nao-verificado { background: var(--erro-fundo); border-left-color: var(--erro); }
.alerta-nao-verificado strong:first-child { color: var(--erro-tinta); }

/* Orientação para o técnico N1: o que é, o que causa, qual é o próximo passo. */
.orientacao { display: grid; gap: 12px; margin: 18px 0; }
.orientacao-bloco {
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
}
.orientacao-bloco h2 { margin: 0 0 6px; color: var(--texto-apoio); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.orientacao-bloco p { margin: 0; }
.orientacao-bloco.destaque { border-left: 3px solid var(--acao); background: var(--acao-fundo); }
.orientacao-bloco.destaque h2 { color: var(--acao-tinta); }

/* Números: cada número diz de quantos saiu, e o rótulo diz se é "agora" ou um período. */
.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.numero-caixa {
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
}
.numero-caixa .rotulo { display: block; color: var(--texto-apoio); font-size: 12px; }
.numero-caixa .valor { display: block; margin: 2px 0; font-size: var(--tam-numero); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.numero-caixa .base { display: block; color: var(--texto-apoio); font-size: 12px; }
.numero-caixa.critico { border-left: 3px solid var(--critico); }
.numero-caixa.aviso { border-left: 3px solid var(--aviso); }
.numero-caixa.ok { border-left: 3px solid var(--ok); }

.vazio {
    padding: 28px 18px;
    background: var(--superficie);
    border: 1px dashed var(--borda);
    border-radius: var(--raio-bloco);
    color: var(--texto-apoio);
    text-align: center;
}

/* Histórico de uma ocorrência: quem fez o quê, em ordem. */
.historico { margin: 12px 0; padding: 0; list-style: none; }
.historico > li {
    position: relative;
    padding: 0 0 14px 22px;
    border-left: 2px solid var(--borda);
    margin-left: 6px;
}
.historico > li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--texto-apoio);
}
.historico > li.conferido::before { background: var(--ok); border-color: var(--ok); }
.historico-cabecalho { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: var(--tam-apoio); }
.historico-autor { font-weight: 600; }

/* --- Formulários e botões ------------------------------------------------------------------ */

.campo { display: grid; gap: 5px; margin-bottom: 14px; }
.campo label, .campo legend { color: var(--texto-apoio); font-size: var(--tam-apoio); }
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    font-size: var(--tam-tabela);
}
.campo textarea { min-height: 90px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--acao); outline-offset: -1px; }
.campo .apoio { margin: 0; }
.campo-invalido input, .campo-invalido select, .campo-invalido textarea { border-color: var(--critico); }
.campo-invalido .mensagem { color: var(--critico-tinta); font-size: var(--tam-apoio); font-weight: 600; }

.campo-checkbox { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.campo-checkbox input { margin-top: 4px; accent-color: var(--acao); }

.acoes-formulario { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--acao);
    border-radius: var(--raio-campo);
    background: var(--acao);
    color: var(--acao-texto);
    font: inherit;
    font-size: var(--tam-tabela);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.botao:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.botao-largo { width: 100%; }

.botao-discreto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: var(--tam-apoio);
    text-decoration: none;
    cursor: pointer;
}
.botao-discreto:hover { border-color: var(--acao); color: var(--acao); }
.botao-discreto .icone { width: 16px; height: 16px; color: currentColor; }

/* O perigoso nunca é o botão principal da tela: contorno vermelho, e a ação destrutiva fica
   atrás de uma confirmação (nome digitado, motivo) na zona de risco. */
.botao-perigo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--critico);
    border-radius: var(--raio-campo);
    background: transparent;
    color: var(--critico-tinta);
    font: inherit;
    font-size: var(--tam-tabela);
    font-weight: 600;
    cursor: pointer;
}
.botao-perigo:hover { background: var(--critico-fundo); }

.zona-de-risco {
    margin: 28px 0;
    padding: 16px;
    border: 1px solid var(--critico);
    border-radius: var(--raio-bloco);
    background: var(--superficie);
}
.zona-de-risco h2 { margin-top: 0; color: var(--critico-tinta); }

.interruptor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 118px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: transparent;
    color: var(--texto-apoio);
    font: inherit;
    font-size: var(--tam-apoio);
    cursor: pointer;
}
.interruptor:hover { color: var(--texto); }
.interruptor-chave {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 17px;
    border-radius: var(--raio-pilula);
    background: var(--borda);
    transition: background .15s;
}
.interruptor-chave::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--superficie);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s;
}
.interruptor.ligado, .interruptor[aria-checked="true"] { border-color: var(--ok); color: var(--ok-tinta); }
.interruptor.ligado .interruptor-chave, .interruptor[aria-checked="true"] .interruptor-chave { background: var(--ok); }
.interruptor.ligado .interruptor-chave::after, .interruptor[aria-checked="true"] .interruptor-chave::after { transform: translateX(13px); }

/* Comando para copiar: um por linha, sem crase de continuação. */
.comando {
    display: block;
    overflow-x: auto;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--fundo);
    font-family: var(--fonte-mono);
    font-size: 12.5px;
    white-space: pre;
}

/* --- Tela de entrada ------------------------------------------------------------------------
   No modelo da família Lumina: o formulário à esquerda e, à direita, o painel no marinho da Stack
   IT com a frase do produto (as primeiras palavras no acento claro do produto), três etiquetas do
   que ele faz e o símbolo grande. Em tela estreita o painel some e fica só o formulário. */

.entrada {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(0, 1.1fr);
    flex: 1; /* ocupa a altura que sobra acima do rodapé, na coluna do body */
}
.entrada-formulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(24px, 6vw, 88px);
    background: var(--superficie);
}
.entrada-formulario .marca { margin-bottom: 36px; }
.entrada-formulario .marca-linha { font-size: 28px; }
.entrada-formulario h1 { margin-bottom: 4px; font-size: 20px; }
.entrada-formulario > .apoio { margin: 0 0 24px; }
.entrada-formulario form { max-width: 360px; }
.entrada-formulario .rodape-entrada { margin-top: 40px; color: var(--texto-apoio); font-size: 12px; }

.entrada-painel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 56px clamp(28px, 5vw, 72px);
    background: var(--stackit-marinho);
    color: #E8EBEE;
}
.entrada-painel .frase {
    max-width: 30ch;
    margin: 0 0 22px;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.entrada-painel .frase em { font-style: normal; color: var(--entrada-destaque, #6AA9E9); }
.entrada-painel .marcadores { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.entrada-painel .marcadores li {
    padding: 4px 11px;
    border: 1px solid rgba(232, 235, 238, .28);
    border-radius: var(--raio-pilula);
    color: #C9D7DF;
    font-size: 12.5px;
}
/* As etapas do processo do produto, na ordem, com uma seta entre elas e o ponto que cada uma tem no
   símbolo: o início cheio, o meio vazado e o fim no verde conferido, com o visto. Na Central,
   Executar → Registrar → Validar; no Guarda, os estados de uma cópia. Lista ordenada: o leitor de tela
   lê a ordem; a seta é só desenho. */
.entrada-painel .etapas { gap: 26px; }
.entrada-painel .etapas li {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #E8EBEE;
}
.entrada-painel .etapas li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E8EBEE;
}
.entrada-painel .etapas li.etapa-meio::before { background: transparent; box-shadow: inset 0 0 0 2px #E8EBEE; }
.entrada-painel .etapas li.etapa-fim::before {
    width: 14px;
    height: 14px;
    background: #1FB08F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2 L6 9.4 L10.4 4.8' fill='none' stroke='%230B2540' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.entrada-painel .etapas li:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -20px;
    color: #9FB0BC;
    font-size: 13px;
}
.entrada-painel .frase, .entrada-painel .marcadores { position: relative; z-index: 1; }

/* O fundo em marca d'água (componente FundoEntrada): o que o produto é por dentro. Na Central, a janela
   do PowerShell, os racks e as ligações com os protocolos. Fica na faixa do meio do painel, entre o
   símbolo no alto e a frase embaixo, alinhado à margem do texto; traço fino e baixa opacidade. */
.entrada-painel { overflow: hidden; }
/* A largura tem três tetos: a do painel, 780 px, e a que a altura do painel (a tela menos o rodapé) deixa
   entre o símbolo (até 216 px do alto) e a frase, contando o fim real do desenho (a linha do HTTPS, a 90%
   da altura) e 20 px de folga. Assim ele cresce
   em tela grande sem encostar no símbolo nem na frase em tela baixa. */
.entrada-painel .fundo-produto {
    position: absolute;
    top: 216px;
    left: clamp(28px, 5vw, 72px);
    width: min(calc(100% - 2 * clamp(28px, 5vw, 72px)), 780px, calc((100vh - 440px) * 1.86));
    height: auto;
}
.fundo-produto .moldura, .fundo-produto .gaveta { fill: none; stroke: #E8EBEE; stroke-width: 1.5; opacity: .22; }
.fundo-produto .terminal .moldura { fill: rgba(232, 235, 238, .03); }
.fundo-produto .barra, .fundo-produto .fenda { fill: none; stroke: #E8EBEE; stroke-width: 1.5; opacity: .16; }
.fundo-produto .terminal circle { fill: #E8EBEE; opacity: .2; }
.fundo-produto .titulo { fill: #E8EBEE; opacity: .3; font: 10px var(--fonte); }
.fundo-produto .codigo { fill: var(--entrada-destaque, #6AA9E9); opacity: .5; font: 11.5px var(--fonte-mono); }
.fundo-produto .cursor { fill: var(--entrada-destaque, #6AA9E9); opacity: .5; }
.fundo-produto .luz { fill: #E8EBEE; opacity: .3; }
.fundo-produto .luz-ok { fill: #1FB08F; opacity: .9; }
.fundo-produto .ligacoes path { fill: none; stroke: var(--entrada-destaque, #6AA9E9); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .45; }
.fundo-produto .protocolo rect { fill: #0B2540; stroke: var(--entrada-destaque, #6AA9E9); stroke-width: 1; opacity: .8; }
.fundo-produto .protocolo text { fill: var(--entrada-destaque, #6AA9E9); opacity: .85; font: 500 10px var(--fonte-mono); text-anchor: middle; }
/* O símbolo do produto no alto, à direita, longe da frase: decora sem disputar a leitura. */
.entrada-painel .simbolo-fundo {
    position: absolute;
    top: 48px;
    right: clamp(28px, 5vw, 72px);
    display: block;
    width: min(16vw, 160px);
}
/* Sobre o marinho, o símbolo usa os tons do escuro, com o acento claro do produto. */
.entrada-painel .marca-simbolo {
    --tinta: #E8EBEE;
    --superficie: #0B2540;
    --conferido: #1FB08F;
    --marca-produto: var(--entrada-destaque, #6AA9E9);
    width: 100%;
    height: auto;
}
/* O acento claro de cada produto, para a frase e o símbolo sobre o marinho. */
:root[data-produto="navega"] .entrada-painel { --entrada-destaque: #DF8AC5; }
:root[data-produto="guarda"] .entrada-painel { --entrada-destaque: #96A8BD; }

/* --- Relatório e capa ---------------------------------------------------------------------- */

.folha {
    max-width: 210mm;
    margin: 0 auto;
    padding: 24px 28px 36px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
}
.cabecalho-relatorio {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--marca-produto);
}
.cabecalho-relatorio h1 { margin: 10px 0 0; font-size: 20px; }
.identificacao-relatorio { color: var(--texto-apoio); font-size: 12.5px; text-align: right; }
.identificacao-relatorio strong { display: block; color: var(--texto); font-size: var(--tam-tabela); }

/* A capa: escura para PDF, clara para papel. A régua grossa no alto é o acento do produto. */
.capa-relatorio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 210mm;
    aspect-ratio: 210 / 297;
    margin: 0 auto 20px;
    padding: 30mm 22mm 24mm;
    border-top: 6mm solid var(--marca-produto);
}
.capa-clara { background: #FFFFFF; color: #13202E; border-left: 1px solid var(--borda); border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.capa-escura {
    --tinta: #E8EBEE;
    --superficie: #0B2540;
    --conferido: #1FB08F;
    --stackit: #5BC0E8;
    background: #0B2540;
    color: #E8EBEE;
}
.capa-relatorio .capa-tipo { margin: 0 0 8px; color: var(--texto-apoio); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.capa-escura .capa-tipo { color: #C9D7DF; }
.capa-relatorio .capa-titulo { margin: 0 0 10px; font-size: var(--tam-capa); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.capa-relatorio .capa-cliente { margin: 0; color: #52616B; font-size: 15px; }
.capa-escura .capa-cliente { color: #C9D7DF; }
.capa-relatorio .capa-pe { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: #52616B; font-size: 12px; }
.capa-escura .capa-pe { color: #9FB0BC; }
.capa-relatorio .marca-linha { font-size: 34px; }
.capa-escura .marca-simbolo .meio { fill: #0B2540; }

/* --- Tela estreita ------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .corpo { display: block; }
    .lateral {
        position: static;
        display: flex;
        gap: 4px;
        width: auto;
        max-height: none;
        overflow-x: auto;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid var(--borda);
    }
    .grupo-menu { display: flex; gap: 4px; }
    .grupo-menu + .grupo-menu { margin-top: 0; }
    .titulo-grupo, .rotulo-menu, .botao-menu { display: none; }

    .entrada { grid-template-columns: 1fr; }
    .entrada-painel { display: none; }
}

@media (max-width: 720px) {
    .topo { padding: 0 16px; }
    .topo .por-stackit { display: none; }
    .conteudo { padding: 20px 16px 40px; }
    .tabela { font-size: 13px; }
    .tabela th, .tabela td { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .interruptor-chave, .interruptor-chave::after { transition: none; }
}

/* --- Impressão ------------------------------------------------------------------------------
   Pelo navegador, sem gerador de PDF. Some o que é de tela; os relatórios são páginas normais. */

@media print {
    @page { size: A4; margin: 14mm 12mm; }
    body { display: block; background: #fff; font-size: 12px; }
    .topo, .lateral, .rodape, .acoes-relatorio, .pular-para-conteudo, .filtros, .paginacao, .abas { display: none !important; }
    .conteudo { max-width: none; padding: 0; }
    .folha { max-width: none; padding: 0; border: none; border-radius: 0; }
    .tabela { border-radius: 0; }
    .tabela tr { break-inside: avoid; }
    .capa-relatorio { break-after: page; margin: 0; max-width: none; height: 269mm; aspect-ratio: auto; border-left: none; border-right: none; border-bottom: none; }
    .capa-escura { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { color: inherit; text-decoration: none; }
}