/* casa-ui v0.5.0 - gerado por ui/sync.ps1, nao edite */
/* casa-ui — reset, layout da pagina e utilidades */

@layer base {
  * { box-sizing:border-box; }
  body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
  h1,h2,h3,p { margin:0; }
  a { color:inherit; text-decoration:none; }
  a.link { color:var(--accent-texto); font-weight:600; }
  a.link:hover { color:#a8c4fa; }
  button { border:0; background:none; font:inherit; color:inherit; cursor:pointer; }
  code, .mono { font-family:var(--mono); }
  /* Todo número: largura fixa por dígito, senão o valor dança a cada tick. */
  .num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
  ::selection { background:color-mix(in srgb, var(--accent) 30%, transparent); }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-ctl); }
  .icone { width:16px; height:16px; flex:none; }
}

@layer layout {
  .app { display:grid; grid-template-columns:var(--nav) minmax(0,1fr); min-height:100vh; }
  .conteudo { display:flex; flex-direction:column; min-width:0; }
  .corpo { flex:1; width:100%; max-width:1600px; padding:var(--s5) var(--s5) var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
  .tela { display:none; flex-direction:column; gap:var(--s4); }
  .tela[data-ativa] { display:flex; }
  @media (prefers-reduced-motion: no-preference) {
    .tela[data-ativa] { animation:entra .18s ease; }
    @keyframes entra { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
  }
  .grade-2 { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--s4); }
  /* Par IGUAL, para dois graficos que valem o mesmo -- Download|Upload,
     Ping|Jitter. A .grade-2 e 1.6fr/1fr e existe para o par desigual, em que
     um lado e o assunto e o outro e apoio. Usar a .grade-2 num par igual
     deixa um grafico largo e o irmao espremido. */
  .grade-par { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:var(--s4); }
  .grade-1-1 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s4); }
  .grade-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s4); }
}

@layer utilidades {
  .oculto { display:none !important; }
  .col { display:flex; flex-direction:column; gap:var(--s4); min-height:0; }
  .cresce { flex:1; min-height:0; }
  .fim { margin-left:auto; }
  .tenue { color:var(--faint); }
  .faint { color:var(--faint); }
  .pequeno { font-size:12px; }

  @media (max-width:1100px) {
    .app { grid-template-columns:1fr; }
    .nav { position:fixed; z-index:30; width:var(--nav); transform:translateX(-102%); transition:transform .2s; box-shadow:var(--sombra); }
    .nav[data-aberta] { transform:none; }
    .grade-2, .grade-par { grid-template-columns:1fr; }
  }
  @media (max-width:640px) {
    .corpo { padding:var(--s4) var(--s3) var(--s6); }
    .tabela-cab { display:none; }
  }
}