/*
 * TermoVision v3 — páginas fora do app: entrar.html, config.html e a área
 * /admin/ (Visão geral, Testes de tela, Treinos). Lote 3F, PROPOSTA.md M40.
 *
 * Cada página carrega, nesta ordem, e declara as camadas antes:
 *   <style>@layer tokens, componentes, secoes;</style>
 *   /css/tokens.css · /css/componentes.css · /css/paginas.css
 * O `:root` próprio de cada página (com #f0842a, #0f1418…) deixou de existir:
 * cor, espaço, fonte e raio vêm de tokens.css.
 *
 * Só tokens; camada `secoes`.
 */
@layer secoes {

  /* ------------------------------------------- cartão central (entrar, config) */

  .pg-centro {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    padding: var(--e-5) var(--e-4);
  }

  .pg-cartao {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    width: 100%;
    max-width: 400px;
    min-width: 0;
    padding: var(--e-6) var(--e-5);
    border: 1px solid var(--borda-2);
    border-radius: var(--r-lg);
    background: var(--sup-1);
  }
  .pg-cartao.largo { max-width: var(--modal-md); }

  .pg-marca {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0;
    color: var(--texto-1);
    font-size: var(--t-xl);
    line-height: var(--lh-xl);
    font-weight: var(--peso-forte);
  }
  .pg-marca img { width: var(--alt-sm); height: var(--alt-sm); flex: none; }

  .pg-sub {
    margin: 0;
    color: var(--texto-2);
    font-size: var(--t-md);
    line-height: var(--lh-md);
  }
  .pg-ajuda {
    margin: 0;
    color: var(--texto-3);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
  }
  .pg-centralizado { text-align: center; }

  .pg-form {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-width: 0;
    margin: 0;
  }
  .pg-largo { width: 100%; }

  /* Aviso fixo na página (erro de login, resultado da configuração). */
  .pg-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--e-2);
    margin: 0;
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--erro);
    border-radius: var(--r-md);
    background: var(--erro-fundo);
    color: var(--texto-1);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    overflow-wrap: anywhere;
  }
  .pg-aviso[data-tom="ok"] { border-color: var(--ok); background: var(--ok-fundo); }
  .pg-aviso[data-tom="atencao"] { border-color: var(--aviso); background: var(--aviso-fundo); }
  .pg-aviso svg { flex: none; width: 16px; height: 16px; }

  .pg-ou {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin: 0;
    color: var(--texto-3);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
  }
  .pg-ou::before, .pg-ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda-2);
  }

  .pg-rodape {
    margin: 0;
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda-1);
    color: var(--texto-3);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
  }

  /* -------------------------------------------------------------- config */

  .pg-bloco {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-width: 0;
    margin: 0;
    padding: var(--e-4);
    border: 1px solid var(--borda-2);
    border-radius: var(--r-md);
  }
  .pg-bloco-titulo {
    margin: 0;
    color: var(--texto-1);
    font-size: var(--t-lg);
    line-height: var(--lh-lg);
    font-weight: var(--peso-forte);
  }

  .pg-dados {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--e-1) var(--e-4);
    margin: 0;
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
  }
  .pg-dados dt { color: var(--texto-2); }
  .pg-dados dd { margin: 0; min-width: 0; color: var(--texto-1); overflow-wrap: anywhere; }
  .pg-mono { font-family: var(--fonte-mono); }

  .pg-cuidado {
    margin: 0;
    color: var(--aviso);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
  }

  .pg-linha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    min-width: 0;
  }
  .pg-linha > .bt { flex: 1 1 auto; }

  /* Navegador de pastas do servidor */
  .pg-nav {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--borda-2);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .pg-nav-topo,
  .pg-nav-rodape {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    min-width: 0;
    padding: var(--e-2);
    background: var(--sup-2);
  }
  .pg-nav-topo { border-bottom: 1px solid var(--borda-2); }
  .pg-nav-rodape { justify-content: flex-end; border-top: 1px solid var(--borda-2); }
  .pg-nav-atual {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texto-2);
    font-family: var(--fonte-mono);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
  }
  .pg-nav-lista {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    min-width: 0;
    overflow-y: auto;
  }
  .pg-nav-item {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    width: 100%;
    min-height: var(--alt-md);
    margin: 0;
    padding: var(--e-1) var(--e-3);
    border: 0;
    border-bottom: 1px solid var(--borda-1);
    background: transparent;
    color: var(--texto-1);
    font-family: inherit;
    font-size: var(--t-md);
    line-height: var(--lh-md);
    text-align: left;
    cursor: pointer;
  }
  .pg-nav-item:hover { background: var(--sup-2); }
  .pg-nav-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg-nav-item svg { flex: none; color: var(--texto-3); }
  .pg-nav-vazio {
    margin: 0;
    padding: var(--e-3);
    color: var(--texto-3);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
  }

  /* ------------------------------------------------------- área /admin */

  .admin-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-1);
    min-height: var(--topbar-h);
    padding: 0 var(--e-5);
    border-bottom: 1px solid var(--borda-1);
    background: var(--sup-1);
  }
  .admin-menu .am-marca {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-right: var(--e-3);
    color: var(--texto-1);
    font-size: var(--t-md);
    line-height: var(--lh-md);
    font-weight: var(--peso-forte);
  }
  .admin-menu .am-marca img { width: var(--e-5); height: var(--e-5); }
  .admin-menu a {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: var(--alt-md);
    padding: var(--e-1) var(--e-3);
    border-radius: var(--r-md);
    color: var(--texto-2);
    font-size: var(--t-md);
    line-height: var(--lh-md);
    text-decoration: none;
  }
  .admin-menu a:hover { background: var(--sup-2); color: var(--texto-1); }
  .admin-menu a[aria-current="page"] {
    background: var(--sup-3);
    color: var(--texto-1);
    box-shadow: inset 0 -2px 0 var(--acento);
    font-weight: var(--peso-medio);
  }
  .admin-menu .am-fim { margin-left: auto; }

  .pg-admin {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    min-width: 0;
    padding: var(--e-5);
  }
  .pg-titulo {
    margin: 0;
    color: var(--texto-1);
    font-size: var(--t-xl);
    line-height: var(--lh-xl);
    font-weight: var(--peso-forte);
  }
  .pg-cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-3);
    min-width: 0;
  }
  .pg-cab .pg-placar { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

  .pg-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--e-4);
    max-width: 1200px;
  }
  a.pg-card {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    min-width: 0;
    padding: var(--e-4) var(--e-5);
    border: 1px solid var(--borda-2);
    border-radius: var(--r-md);
    background: var(--sup-1);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-rapido) var(--ease-padrao);
  }
  a.pg-card:hover { border-color: var(--acento); }
  .pg-card-ic { display: inline-flex; color: var(--acento); }
  .pg-card-nome {
    margin: 0;
    color: var(--texto-1);
    font-size: var(--t-lg);
    line-height: var(--lh-lg);
    font-weight: var(--peso-forte);
  }
  .pg-card-estado { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); }

  /* Testes de tela */
  .pg-casos { display: flex; flex-direction: column; gap: var(--e-2); max-width: 1100px; margin: 0; padding: 0; list-style: none; }
  .pg-caso {
    min-width: 0;
    border: 1px solid var(--borda-2);
    border-radius: var(--r-md);
    background: var(--sup-1);
  }
  .pg-caso[data-estado="ruim"] { border-color: var(--erro); }
  .pg-caso > summary {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: var(--alt-lg);
    padding: var(--e-2) var(--e-4);
    cursor: pointer;
    list-style: none;
  }
  .pg-caso > summary::-webkit-details-marker { display: none; }
  .pg-caso-marca { display: inline-flex; flex: none; color: var(--texto-3); }
  .pg-caso[data-estado="ok"] .pg-caso-marca { color: var(--ok); }
  .pg-caso[data-estado="ruim"] .pg-caso-marca { color: var(--erro); }
  .pg-caso[data-estado="rodando"] .pg-caso-marca { color: var(--aviso); }
  .pg-caso-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
  .pg-caso-nome { color: var(--texto-1); font-weight: var(--peso-forte); }
  .pg-caso-porque { color: var(--texto-3); font-size: var(--t-sm); line-height: var(--lh-sm); }
  .pg-caso-tempo { flex: none; color: var(--texto-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
  .pg-caso-corpo { padding: 0 var(--e-4) var(--e-3) var(--e-7); }
  .pg-erro {
    margin: var(--e-2) 0;
    padding: var(--e-2) var(--e-3);
    border-left: 3px solid var(--erro);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--erro-fundo);
    color: var(--texto-1);
    font-family: var(--fonte-mono);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .pg-passos { margin: var(--e-1) 0 0; padding-left: var(--e-4); color: var(--texto-2); font-size: var(--t-sm); line-height: var(--lh-sm); }

  .pg-palco {
    position: fixed;
    right: var(--e-4);
    bottom: var(--e-4);
    z-index: var(--z-drawer);
    width: min(900px, calc(100vw - var(--e-6)));
    height: min(620px, calc(100vh - var(--e-6)));
    border: 1px solid var(--borda-controle);
    border-radius: var(--r-lg);
    background: var(--sup-0);
    box-shadow: var(--sombra-2);
  }

  /* Treinos (tabela larga): a tabela rola, a página não (L1). */
  .pg-admin .tabela-rolagem { max-height: calc(100vh - 220px); }
  .pg-mod { margin-left: var(--e-2); }
  .pg-usinas { display: block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg-ram { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--e-2); }
  .pg-ram-barra {
    display: inline-block;
    width: var(--w, 4px);
    height: var(--e-2);
    border-radius: var(--r-pill);
    background: var(--acento);
  }
  .pg-ram-barra[data-nivel="alto"] { background: var(--erro); }
  .pg-ram-barra[data-nivel="medio"] { background: var(--aviso); }
  .tabela td.pg-bom { color: var(--ok); }
  .tabela td.pg-medio { color: var(--aviso); }
  .tabela td.pg-fraco { color: var(--erro); }
  .pg-apagado { color: var(--texto-3); }
}

/* /logs/<id> (log.html, js/paginas/log.js) — Melhorias.docx, 12/10/2026. */
@layer secoes {
  .lg { max-width: 1440px; }
  /* A grade, o rastro e o texto: o mesmo respiro entre eles que entre os cartões. */
  #lg-corpo { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
  .lg-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: var(--e-4);
    min-width: 0;
  }
  .lg-cartao {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-width: 0;
    padding: var(--e-4);
    border: 1px solid var(--borda-2);
    border-radius: var(--r-md);
    background: var(--sup-1);
  }
  .lg-largo { grid-column: 1 / -1; }
  .lg-prefixo { overflow-wrap: anywhere; color: var(--texto-1); }
  details.lg-cartao > summary { cursor: pointer; min-height: var(--alt-sm); display: flex; align-items: center; }
  .lg-sub {
    margin: 0;
    color: var(--texto-1);
    font-size: var(--t-lg);
    line-height: var(--lh-lg);
    font-weight: var(--peso-forte);
  }
  .lg-nota { margin: 0; color: var(--texto-2); font-size: var(--t-sm); line-height: var(--lh-sm); }
  .lg-dl {
    display: grid;
    grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
    gap: var(--e-1) var(--e-4);
    margin: 0;
    min-width: 0;
  }
  .lg-dl dt { color: var(--texto-2); }
  .lg-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--texto-1); }
  .lg-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-3); min-width: 0; }
  .lg-filtros .campo-ctrl { min-width: 220px; }
  .pg-admin .lg-tabela { max-height: calc(100vh - 260px); }
  /* A matriz por zona e a organização por usina passam de cem etapas: a tabela rola. */
  .lg-etapas { max-height: 320px; }
  .lg-caminho { max-width: 44ch; }
  .lg-tipo[data-tipo="mover"] { border-color: var(--ok); }
  .lg-tipo[data-tipo="conflito"], .lg-tipo[data-tipo="erro"] { border-color: var(--erro); }
  .lg-tipo[data-tipo="duplicada"], .lg-tipo[data-tipo="ficou"], .lg-tipo[data-tipo="aviso"] { border-color: var(--aviso); }
  .lg-tipo[data-tipo="etapa"] { border-color: var(--info); }
  /* Consumo no tempo (13/10/2026): uma série pequena por recurso. */
  .lg-minis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: var(--e-3) var(--e-4);
    min-width: 0;
  }
  .lg-mini-fig { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; margin: 0; }
  .lg-mini {
    width: 100%;
    height: 72px;
    fill: none;
    border: 1px solid var(--borda-1);
    border-radius: var(--r-sm);
    background: var(--sup-0);
  }
  .lg-mini-linha { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke: var(--info); }
  .lg-mini-linha.lg-s-ram { stroke: var(--ok); }
  .lg-mini-linha.lg-s-gpu { stroke: var(--aviso); }
  .lg-mini-linha.lg-s-vram { stroke: var(--acento); }
  .lg-mini-linha.lg-s-maq { stroke: var(--texto-2); }
  .lg-texto {
    max-height: 480px;
    margin: 0;
    padding: var(--e-3);
    overflow: auto;
    border: 1px solid var(--borda-1);
    border-radius: var(--r-md);
    background: var(--sup-0);
    color: var(--texto-1);
    font-family: var(--fonte-mono);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}