/* Satela UI — sistema de design do painel do cliente (dashboard.satela.com.br).
   Sem build e sem CDN: tokens, base, layout e componentes neste arquivo.
   Claro é o padrão; o escuro vale só quando escolhido (<html data-tema="escuro">, gravado por ui/tema.js). */

@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.fa41c43a3d8e.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.b636a65da4f0.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --bg: #f3f5f4;
  --surface: #ffffff;
  --sunken: #eaeeec;
  --ink: #111816;
  --muted: #5b6761;
  --line: #dbe2de;
  --line-strong: #c3cdc8;
  --signal: #0b8a5d;
  --signal-ink: #ffffff;
  --signal-soft: #dcf2e9;
  --warn: #a8530a;
  --warn-soft: #fbead3;
  --bad: #b3261e;
  --bad-soft: #fbe1de;
  --focus: #0b8a5d;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --side: 15.5rem;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --bg: #0b100e; --surface: #121a17; --sunken: #0e1512; --ink: #e5ede9; --muted: #92a19a;
  --line: #22302a; --line-strong: #324139; --signal: #34d399; --signal-ink: #04130d; --signal-soft: #11342a;
  --warn: #f0a85a; --warn-soft: #3a2a12; --bad: #f28b82; --bad-soft: #3b1815; --focus: #34d399;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: .88em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.stack > * + * { margin-top: 1rem; }
.stack > input[type="hidden"] + *, .stack-lg > input[type="hidden"] + * { margin-top: 0; }
.stack-lg > * + * { margin-top: 1.75rem; }
.row-flex { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.row-flex.between { justify-content: space-between; }
.grow { flex: 1 1 12rem; min-width: 0; }

/* ---------- casca: sidebar + conteúdo ---------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.1rem .9rem; background: var(--surface); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .6rem; padding: .2rem .5rem; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; text-decoration: none; }
.brand svg { color: var(--signal); flex: none; }
.who { padding: .55rem .6rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); }
.who strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { font-size: .8rem; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: var(--r-sm); text-decoration: none; color: var(--muted); font-weight: 500; }
.nav a:hover { background: var(--sunken); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--signal-soft); color: var(--ink); }
.nav a[aria-current="page"] svg { color: var(--signal); }
.nav svg { width: 18px; height: 18px; flex: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.main { min-width: 0; padding: 2rem clamp(1rem, 3.5vw, 3rem) 4rem; }
.wrap { max-width: 66rem; margin: 0 auto; }
.wrap.narrow { max-width: 40rem; margin-left: 0; }

@media (max-width: 52rem) {
  .shell { display: block; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .8rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .who { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; }
  .main { padding-top: 1.25rem; }
}

/* ---------- cabeçalho de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.page-head h1 { font-size: clamp(1.45rem, 2.2vw + .8rem, 1.9rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.page-head p { margin-top: .35rem; color: var(--muted); max-width: 46rem; }
.crumb { display: inline-block; margin-bottom: .6rem; color: var(--muted); font-size: .88rem; text-decoration: none; }
.crumb:hover { color: var(--ink); }
.section-title { font-size: 1rem; font-weight: 600; letter-spacing: -.005em; }

/* ---------- botões e formulários ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-weight: 500; font-size: .92rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s; }
.btn:hover { background: var(--sunken); }
.btn-primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn-primary:hover { background: var(--signal); filter: brightness(1.08); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-sm { padding: .3rem .6rem; font-size: .84rem; }
.btn svg { width: 16px; height: 16px; }
.link { color: var(--signal); text-underline-offset: 3px; }
.link:hover { text-decoration-thickness: 2px; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label { font-weight: 500; font-size: .9rem; }
.field .hint { font-size: .82rem; color: var(--muted); }
.field .error { font-size: .82rem; color: var(--bad); }
.input, .select, .textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .8; }
.textarea { min-height: 9rem; resize: vertical; font-family: var(--mono); font-size: .86rem; line-height: 1.5; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.check input { margin-top: .2rem; accent-color: var(--signal); }

/* ---------- superfícies ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.panel-pad { padding: 1.25rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-head + * { margin: 0; }

/* lista em linhas (padrão no lugar de grade de cartões) */
.rows > li, .rows > .rows-item { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .85rem 1.25rem; }
.rows > li + li, .rows > .rows-item + .rows-item { border-top: 1px solid var(--line); }
.rows a.rows-link { text-decoration: none; }
.rows .rows-main { flex: 1 1 14rem; min-width: 0; }
.rows .rows-title { font-weight: 600; }
.rows .rows-sub { color: var(--muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .rows-end { display: flex; align-items: center; gap: .6rem; flex: none; }
.rows.hover > li:hover { background: color-mix(in srgb, var(--sunken) 70%, transparent); }
.empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .25rem; }
.empty .btn { margin-top: 1rem; }

/* lista de pares chave/valor */
.kv { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: .55rem 1.25rem; }
.kv dt { color: var(--muted); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: .6rem; } }

/* ---------- estado ---------- */
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 500; word-spacing: .1em; letter-spacing: .005em; background: var(--sunken); color: var(--muted); white-space: nowrap; }
.badge.ok { background: var(--signal-soft); color: var(--signal); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok .dot { animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 .4rem transparent; } }

.notice { padding: .7rem 1rem; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-sm); background: var(--surface); font-size: .92rem; }
.notice.ok { border-left-color: var(--signal); }
.notice.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.notice.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.notice a { color: inherit; font-weight: 600; }

/* ---------- abas ---------- */
.tabs { display: flex; gap: .25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: .6rem .85rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--signal); }

/* ---------- cubos de crédito (a peça central do painel) ---------- */
.cubos { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 26rem; }
.cubo { aspect-ratio: 1; border-radius: 5px; background: var(--signal); }
.cubo.usado { background: var(--line); }
.cubo.excesso { background: color-mix(in srgb, var(--warn) 75%, var(--surface)); }
.cubos-bloco { display: grid; grid-template-columns: minmax(0, 26rem) 1fr; gap: 2rem; align-items: start; padding: 1.25rem; }
.cubos-numero { font-size: 2.1rem; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.meter { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--signal); }
.uso-lista { display: grid; gap: .9rem; }
.uso-lista .uso-linha { display: grid; gap: .3rem; }
.uso-lista .uso-topo { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
@media (max-width: 52rem) { .cubos-bloco { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- código e tabelas ---------- */
pre.code, .code-block { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); overflow: auto; font-family: var(--mono); font-size: .84rem; white-space: pre-wrap; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-weight: 500; color: var(--muted); padding: .55rem 1.25rem; border-bottom: 1px solid var(--line); }
.table td { padding: .7rem 1.25rem; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }

/* ---------- páginas sem sidebar (entrar, pagar) ---------- */
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.center-card { width: 100%; max-width: 24rem; }
.center-card.wide { max-width: 28rem; }
.center-brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.15rem; margin-bottom: 1.75rem; text-decoration: none; }
.center-brand svg { color: var(--signal); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* blocos recolhíveis (details > summary.panel-head) */
details > summary.panel-head { list-style: none; cursor: pointer; }
details > summary.panel-head::-webkit-details-marker { display: none; }
details > summary.panel-head::after { content: ""; width: .5rem; height: .5rem; margin-left: .75rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; flex: none; }
details[open] > summary.panel-head::after { transform: rotate(-135deg); }
details[open] > summary.panel-head { border-bottom: 1px solid var(--line); }
details:not([open]) > summary.panel-head { border-bottom: 0; }

/* ---------- console da equipe ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kpi { background: var(--surface); padding: 1rem 1.25rem; text-decoration: none; display: block; }
a.kpi:hover { background: var(--sunken); }
.kpi-num { font-size: 1.85rem; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.kpi-label { color: var(--muted); font-size: .88rem; margin-top: .2rem; }
.kpi-note { color: var(--muted); font-size: .8rem; margin-top: .35rem; }
.kpi.bad .kpi-num { color: var(--bad); }
.kpi.warn .kpi-num { color: var(--warn); }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar .input, .toolbar .select { width: auto; min-width: 12rem; }
.toolbar .grow { flex: 1 1 14rem; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 64rem) { .two-col { grid-template-columns: 1fr; } }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.25rem; }
.form-grid .span-all { grid-column: 1 / -1; }
.side .tag-console { margin-left: .25rem; padding: .05rem .4rem; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
.nav .nav-sep { margin: .9rem .6rem .25rem; font-size: .75rem; color: var(--muted); font-weight: 500; }
td .btn, td form { margin: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: color-mix(in srgb, var(--sunken) 60%, transparent); }
.table a.row-link { text-decoration: none; font-weight: 600; }
.table a.row-link:hover { text-decoration: underline; }
.pre-log { max-height: 22rem; overflow: auto; margin: 0; padding: .9rem 1.1rem; font-family: var(--mono); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; background: var(--sunken); border-radius: var(--r-sm); }

/* ---------- tema e "vendo como" (equipe) ---------- */
.tema-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.ver-como { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--line-strong); padding: .55rem 1rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; font-size: .88rem; }
.ver-como form { margin: 0; }
.ver-como-sel { display: flex; flex-direction: column; gap: .35rem; }
.ver-como-sel select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .35rem .5rem; max-width: 100%; }
.uso-avancado { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.uso-avancado summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.uso-avancado[open] summary { margin-bottom: .6rem; }
.doc { max-width: 46rem; line-height: 1.65; }
.doc h1 { margin-bottom: 1rem; } .doc h2 { margin: 1.8rem 0 .6rem; } .doc p, .doc ul, .doc ol { margin: .7rem 0; }
.doc ul, .doc ol { padding-left: 1.3rem; list-style: revert; }
.doc pre { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1rem; overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; margin: 1rem 0; } .doc th, .doc td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.doc a { color: var(--signal); }