/* casa-ui v0.5.0 - gerado por ui/sync.ps1, nao edite */
/* casa-ui — o vocabulário genérico: o que serve a qualquer app da casa.

   O shell de navegação saiu para ui/nav.css e o topo do painel foi para
   painel.css. Este arquivo ficou só com o que o nome promete. */

@layer componentes {


  /* Cabeçalho de tela — substitui o hero */
  .cabecalho { display:flex; align-items:center; gap: var(--s3); flex-wrap:wrap; }
  .cabecalho h1 { font-size:24px; font-weight:600; letter-spacing:-.025em; }
  .cabecalho .nota { font:500 12.5px var(--mono); color:var(--faint); }
  .chip { padding: var(--s1) var(--s2); border-radius:var(--r-pilula); background:rgba(255,255,255,.05); color:var(--faint); font:600 11px var(--mono); white-space:nowrap; }
  .chip[data-nivel="ok"] { background:color-mix(in srgb, var(--ok) 13%, transparent); color:var(--ok-texto); }
  .chip[data-nivel="aviso"] { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn-texto); }
  .chip[data-nivel="crit"] { background:color-mix(in srgb, var(--crit) 14%, transparent); color:var(--crit-texto); }

  /* Faixa de veredito */
  .faixa { display:flex; align-items:center; flex-wrap:wrap; gap: var(--s4); padding: var(--s4) var(--s5); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); }
  .faixa > div { flex:1; min-width:min(100%, 34ch); }
  .faixa-ico { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:var(--r-ctl); background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok-texto); }
  .faixa-ico svg { width:18px; height:18px; }
  .faixa strong { display:block; font-size:17px; font-weight:600; letter-spacing:-.015em; color:var(--ok-texto); }
  .faixa .sub { display:block; margin-top: var(--s1); font-size:13.5px; color:var(--muted); }
  .faixa .btn { margin-left: auto; flex:none; }
  .faixa[data-nivel="aviso"] { border-color:color-mix(in srgb, var(--warn) 32%, transparent); background:color-mix(in srgb, var(--warn) 5%, transparent); }
  .faixa[data-nivel="aviso"] strong { color:var(--warn-texto); }
  .faixa[data-nivel="aviso"] .faixa-ico { background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn-texto); }
  .faixa[data-nivel="crit"] { border-color:color-mix(in srgb, var(--crit) 34%, transparent); background:color-mix(in srgb, var(--crit) 6%, transparent); }
  .faixa[data-nivel="crit"] strong { color:var(--crit-texto); }
  .faixa[data-nivel="crit"] .faixa-ico { background:color-mix(in srgb, var(--crit) 14%, transparent); color:var(--crit-texto); }

  /* KPIs */
  .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap: 1px; border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--rule); overflow:hidden; }
  .kpi { padding: var(--s4) var(--s4) var(--s3); background:var(--surface); }
  .kpi-rotulo { display:flex; align-items:center; gap: var(--s2); font:var(--rotulo); letter-spacing:var(--rotulo-tracking); color:var(--faint); }
  .kpi-rotulo svg { width:13px; height:13px; color:var(--faint); }
  .kpi-valor { display:block; margin: var(--s3) 0 2px; font:500 27px/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
  .kpi-valor .un { font-size:15px; color:var(--faint); letter-spacing:0; }
  .kpi-pe { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--s3); margin-top: var(--s2); font-size:11.5px; color:var(--faint); }
  .kpi-pe .num { font-size:11px; color:#c9c9d4; }
  .kpi-pe .spark { flex:1; min-width:60px; height:30px; margin-left: var(--s3); }

  /* Painéis */
  /* min-width:0 porque painel dentro de grade nao encolhe sem isto e a
     tabela de dentro empurra a coluna. */
  .painel { min-width:0; display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); overflow:hidden; }
  .painel-cab { display:flex; align-items:center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); }
  .painel-cab h2 { font-size:15.5px; font-weight:600; }
  .painel-cab .nota { font:var(--eixo); color:var(--faint); }
  .painel-cab .fim { margin-left: auto; }
  .painel-corpo { padding: 0 var(--s4) var(--s4); }
  .painel-pe { display:flex; justify-content:space-between; gap: var(--s3); margin-top: auto; padding: var(--s3) var(--s4); border-top:1px solid var(--rule-fraca); font:var(--eixo); color:var(--faint); }
  .legenda { display:flex; align-items:center; gap: var(--s2); font:500 11.5px var(--mono); color:var(--faint); }
  .legenda i { width:14px; height:2px; background:var(--serie-1); }
  .legenda i[data-serie="2"] { background:var(--serie-2); }
  /* A terceira linha e o verde de --ok, que e o que o mockup usa para o
     ping. Nao existe --serie-3: eu tinha inventado um ambar. */
  .legenda i[data-serie="3"] { background:var(--ok); }

  /* Barra de proporção */
  .barra { position:relative; display:block; height:6px; border-radius:var(--r-min); background:var(--rule); overflow:hidden; }
  .barra > i { display:block; height:100%; border-radius:var(--r-min); background:var(--ok); transition:width .3s ease; }
  .barra > i[data-nivel="aviso"] { background:var(--warn); }
  .barra > i[data-nivel="crit"] { background:var(--crit); }
  .barra > i[data-serie="1"] { background:var(--serie-1); }
  .barra > i[data-serie="2"] { background:var(--serie-2); }
  .barra.limite { overflow:visible; }
  .barra.limite::after { position:absolute; top:-3px; left:var(--limite,86%); width:1px; height:12px; background:color-mix(in srgb, var(--crit) 70%, transparent); content:""; }

  /* Listas e tabelas */
  .linhas > * { border-top:1px solid var(--rule-fraca); }
  .linhas > *:first-child { border-top:0; }
  .fato { display:flex; justify-content:space-between; gap: var(--s3); padding: var(--s3) 0; font-size:12.5px; }
  .fato small { font-size:11px; color:var(--faint); }
  .fato strong { font-weight:600; }
  .tabela { border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); overflow:hidden; }
  .tabela-cab, .linha { display:grid; align-items:center; gap: var(--s4); padding: var(--s2) var(--s4); border-bottom:1px solid var(--rule-fraca); }
  .tabela-cab { background:#101015; font:var(--rotulo); letter-spacing:var(--rotulo-tracking); color:var(--faint); }
  .linha:last-child { border-bottom:0; }
  .linha.clicavel { cursor:pointer; }
  .linha.clicavel:hover, .linha[aria-expanded="true"] { background:var(--raised); }
  .col-dir { text-align:right; }
  .linha .chev { width:10px; height:10px; flex:none; color:var(--faint); transition:transform .15s; }
  .linha[aria-expanded="true"] .chev { transform:rotate(90deg); }

  /* Gráficos */
  .grafico { display:grid; grid-template-columns:44px minmax(0,1fr); gap: var(--s2); padding: var(--s1) var(--s4) 0; flex:1; min-height:0; }
  .grafico .eixo-y { display:flex; flex-direction:column; justify-content:space-between; font:var(--eixo); color:var(--faint); text-align:right; }
  .grafico .tela-svg { position:relative; min-height:150px; }
  .grafico svg { display:block; width:100%; height:100%; overflow:visible; }
  .eixo-x { display:flex; justify-content:space-between; padding: var(--s2) var(--s4) var(--s3) var(--s6); font:var(--eixo); color:var(--faint); }
  .dica { position:absolute; z-index:2; padding: var(--s2) var(--s3); border:1px solid #3a3a46; border-radius:var(--s2); background:var(--raised); box-shadow:var(--sombra); pointer-events:none; }
  .dica[hidden] { display:none; }
  .dica p { display:flex; align-items:center; gap: var(--s2); font:500 12px var(--mono); }
  .dica p.hora { margin-bottom: var(--s2); font-size:11px; color:var(--faint); }
  .dica i { width:8px; height:8px; border-radius:var(--r-min); background:var(--serie-1); }
  .dica i[data-serie="2"] { background:var(--serie-2); }
  .dica i[data-serie="3"] { background:var(--ok); }

  /* Botões */
  .btn { display:inline-flex; align-items:center; gap: var(--s2); height:32px; padding: 0 var(--s3); border:1px solid #2e2e38; border-radius:var(--r-ctl); background:var(--surface); font-size:12.5px; font-weight:600; color:#c9c9d4; }
  .btn:hover { border-color:#3f3f4b; background:var(--raised); }
  .btn svg { width:12px; height:12px; }
  .btn[data-tom="accent"] { border-color:var(--accent); background:var(--accent); color:#08080a; }
  .btn[data-tom="aviso"] { border-color:var(--warn); background:var(--warn); color:#1a1206; }
  /* O ledger usa a marca como acao primaria: num app de dinheiro o botao
     que confirma e o vermelho da casa, nao o azul de destaque. */
  .btn[data-tom="marca"] { border-color:var(--marca); background:var(--marca); color:#fff; }
  .btn[data-tom="marca"]:hover { border-color:var(--marca-hover); background:var(--marca-hover); }
  .btn[data-tom="crit"] { border-color:var(--crit); background:var(--crit); color:#26060d; }
  .btn[disabled] { opacity:.45; cursor:not-allowed; }

  /* Os quatro estados de todo widget */
  .esqueleto { display:inline-block; width:64px; height:.8em; border-radius:var(--r-min); background:linear-gradient(90deg,var(--rule),#32323c,var(--rule)); background-size:200% 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .esqueleto { animation:brilha 1.2s linear infinite; }
    @keyframes brilha { from { background-position:100% 0; } to { background-position:-100% 0; } }
  }
  .sem-fonte { display:flex; align-items:center; gap: var(--s2); padding: var(--s3) var(--s3); border-radius:var(--s2); background:rgba(255,255,255,.03); font-size:12.5px; color:var(--faint); }
  .sem-fonte svg { width:14px; height:14px; flex:none; }
  .vazio { display:flex; flex-direction:column; align-items:flex-start; gap: var(--s3); padding: var(--s2) var(--s4) var(--s4); }
  .vazio p { max-width:56ch; font-size:13px; color:var(--muted); }
  .aviso-topo { padding: var(--s3) var(--s3); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius:var(--r-ctl); background:color-mix(in srgb, var(--warn) 6%, transparent); font-size:12.5px; color:var(--warn-texto); }
  .aviso-topo[hidden] { display:none; }
  .toast { position:fixed; right:20px; bottom:20px; z-index:20; padding: var(--s3) var(--s4); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--raised); box-shadow:var(--sombra); font-size:12.5px; opacity:0; transform:translateY(20px); transition:.2s; pointer-events:none; }
  .toast[data-visivel] { opacity:1; transform:none; }

  /* Paleta de comandos */
}