@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); }

:root {
  --cor: #004e7a; --cor-escura: #003653; --cor-clara: #e6f0f6; --cor2: #ff7400;
  --bg: #eef2f7; --bg2: #ffffff; --bg3: #f5f7fa; --card: #ffffff;
  --texto: #0e1621; --texto2: #56657a; --texto3: #8a97a8; --borda: #e6ebf2; --borda2: #d3dbe6;
  --grad: linear-gradient(135deg, var(--cor) 0%, color-mix(in srgb, var(--cor) 60%, #2aa7ff) 100%);
  --grad2: linear-gradient(135deg, var(--cor2) 0%, #ffb35c 100%);
  --ok: #16a34a; --ok-bg: #e7f7ee; --erro: #dc2626; --erro-bg: #fdecec; --aviso: #d97706; --aviso-bg: #fff4e0; --info: #2563eb; --info-bg: #e8effc;
  --raio: 14px; --raio-sm: 9px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .10);
  --sombra-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 40px -14px rgba(16, 24, 40, .22);
  --anel: 0 0 0 4px color-mix(in srgb, var(--cor) 14%, transparent);
  --sombra-modal: 0 24px 80px rgba(2, 8, 20, .35);
  --side-bg: linear-gradient(180deg, var(--cor) 0%, var(--cor-escura) 100%);
  --side-texto: rgba(255,255,255,.84);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --codigo-bg: #0b1220; --codigo-texto: #dbe4f0;
  --largura-side: 256px;
}
[data-theme="escuro"] {
  --bg: #0b1017; --bg2: #121923; --bg3: #18212d; --card: #121923;
  --grad: linear-gradient(135deg, #0f3b5c 0%, #1f6fa8 100%);
  --texto: #e6edf5; --texto2: #9fb0c1; --texto3: #6f8090; --borda: #223040; --borda2: #2d3d4f;
  --ok-bg: #0f2a1c; --erro-bg: #331617; --aviso-bg: #33230b; --info-bg: #13223a; --cor-clara: #12283a;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --side-bg: linear-gradient(180deg, #0f1a26 0%, #0a1219 100%);
  --codigo-bg: #05090f;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--fonte); font-size: 14px; line-height: 1.5; color: var(--texto); background: var(--bg); background-image: radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--cor) 9%, transparent), transparent 60%); background-attachment: fixed; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; transition: background .2s, color .2s; }
#pg { animation: entra .28s cubic-bezier(.2,.8,.2,1); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
a { color: var(--cor); text-decoration: none; }
[data-theme="escuro"] a { color: #7cc4ef; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 24px; } h2 { font-size: 16px; } h3 { font-size: 14.5px; }
p { margin: 0 0 8px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--bg3); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--borda); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--cor2); outline-offset: 2px; }
::selection { background: var(--cor); color: #fff; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--largura-side) 1fr; min-height: 100vh; }
.sidebar { background: var(--side-bg); color: #fff; padding: 20px 14px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; }
.sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; min-height: 60px; }
.sidebar .logo img { height: 34px; max-width: 170px; object-fit: contain; }
.sidebar .logo .nome { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.sidebar .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .5; padding: 14px 12px 6px; font-weight: 600; }
.sidebar a.item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--side-texto); font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; position: relative; }
.sidebar a.item:hover { background: rgba(255,255,255,.09); color: #fff; }
.sidebar a.item.ativo { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px -8px rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.sidebar a.item.ativo::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cor2); }
.sidebar a.item svg { width: 18px; height: 18px; opacity: .9; flex-shrink: 0; }
.sidebar .usuario { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.sidebar .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cor2); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.sidebar .usuario b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .usuario small { opacity: .7; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .usuario .papel { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sidebar .rodape { display: flex; gap: 6px; padding: 10px 6px 0; }
.sidebar .rodape button { flex: 1; background: rgba(255,255,255,.08); border: none; color: #fff; padding: 7px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sidebar .rodape button:hover { background: rgba(255,255,255,.16); }
.sidebar .rodape svg { width: 14px; height: 14px; }
.conteudo { padding: 28px 36px 70px; max-width: 1440px; width: 100%; min-width: 0; }
.topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.topo .sub { color: var(--texto2); margin-top: 4px; font-size: 13.5px; max-width: 760px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.menu-btn { display: none; }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--info-bg); color: var(--info); font-size: 12px; font-weight: 600; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); border-radius: 18px; box-shadow: var(--sombra); padding: 22px 24px; transition: box-shadow .2s, transform .2s; }
.card.hero { background: var(--grad); color: #fff; border: none; position: relative; overflow: hidden; padding: 26px 28px; }
.card.hero::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; right: -120px; top: -180px; background: rgba(255,255,255,.08); }
.card.hero::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; right: 120px; bottom: -160px; background: color-mix(in srgb, var(--cor2) 45%, transparent); filter: blur(20px); }
.card.hero h1 { color: #fff; font-size: 26px; }
.card.hero p { color: rgba(255,255,255,.82); position: relative; }
.card.hero .kpis { display: flex; gap: 28px; margin-top: 18px; flex-wrap: wrap; position: relative; }
.card.hero .kpis b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.card.hero .kpis small { opacity: .8; font-size: 12px; }
.card.hero .btn { background: #fff; color: var(--cor); position: relative; }
.card + .card { margin-top: 16px; }
.card h2 { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card h2 .sub { font-size: 12.5px; color: var(--texto2); font-weight: 400; }
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 18px 20px; position: relative; overflow: hidden; }
.stat .rotulo { font-size: 12px; color: var(--texto2); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.stat .rotulo svg { width: 16px; height: 16px; color: var(--cor); }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: color-mix(in srgb, var(--cor) 7%, transparent); }
.stat:nth-child(2n)::after { background: color-mix(in srgb, var(--cor2) 9%, transparent); }
.stat .valor { font-size: 30px; font-weight: 700; margin-top: 6px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .valor small { font-size: 13px; color: var(--texto2); font-weight: 500; margin-left: 5px; letter-spacing: 0; }
.stat .barra { height: 6px; background: var(--bg3); border-radius: 99px; margin-top: 12px; overflow: hidden; border: 1px solid var(--borda); }
.stat .barra i { display: block; height: 100%; background: var(--cor); border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.stat .barra i.alerta { background: var(--aviso); } .stat .barra i.cheio { background: var(--erro); }
.stat .delta { font-size: 12px; margin-top: 6px; color: var(--texto2); }
.stat .delta.up { color: var(--ok); } .stat .delta.down { color: var(--erro); }

/* ---------- botões / tags ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 11px; border: 1px solid transparent; background: var(--grad); color: #fff; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: filter .15s, transform .12s, box-shadow .15s; white-space: nowrap; line-height: 1.2; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cor) 60%, transparent); }
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--cor) 70%, transparent); } .btn:active { transform: translateY(0); }
.btn.sec { background: var(--bg2); color: var(--texto); border-color: var(--borda2); box-shadow: 0 1px 2px rgba(16,24,40,.05); } .btn.sec:hover { background: var(--bg3); filter: none; box-shadow: var(--sombra); }
.btn.acento { background: var(--grad2); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cor2) 60%, transparent); }
.btn.perigo { background: var(--bg2); color: var(--erro); border-color: var(--borda2); box-shadow: none; } .btn.perigo:hover { background: var(--erro-bg); border-color: var(--erro); filter: none; box-shadow: none; }
.btn.link { box-shadow: none; }
.btn.mini { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icone { padding: 7px; }
.btn.link { background: none; border: none; color: var(--cor); padding: 4px 6px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn.bloco { width: 100%; justify-content: center; }

.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--bg3); color: var(--texto2); border: 1px solid var(--borda); white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .tag.erro { background: var(--erro-bg); color: var(--erro); border-color: transparent; }
.tag.aviso { background: var(--aviso-bg); color: var(--aviso); border-color: transparent; } .tag.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.tag.cor { background: var(--cor); color: #fff; border-color: transparent; } .tag.cor2 { background: var(--cor2); color: #fff; border-color: transparent; }
.tag i.ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.tag.ok i.ponto { animation: pulso 1.8s infinite; }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 60% { box-shadow: 0 0 0 5px rgba(22,163,74,0); } }

.chave { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; background: var(--bg3); border: 1px dashed var(--borda2); border-radius: 8px; padding: 6px 10px; max-width: 100%; color: var(--texto); }
.chave span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chave button { border: none; background: none; cursor: pointer; color: var(--cor); font-weight: 600; font-size: 11.5px; padding: 0; font-family: var(--fonte); }
[data-theme="escuro"] .chave button { color: #7cc4ef; }

/* ---------- tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto3); font-weight: 600; background: var(--bg3); }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: var(--bg3); }
.tabela .acoes { justify-content: flex-end; }
.tabela td small { color: var(--texto2); }
.tabela-wrap { overflow-x: auto; border-radius: 12px; }
.tabela th { background: transparent; border-bottom: 1px solid var(--borda2); }
.tabela-ferramentas { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }
.tabela-ferramentas input { max-width: 280px; }
.paginacao { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 10px 0 0; font-size: 12.5px; color: var(--texto2); }
.paginacao button { border: 1px solid var(--borda2); background: var(--bg2); color: var(--texto); border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.paginacao button:disabled { opacity: .4; cursor: default; }

/* ---------- formulários ---------- */
.form { display: grid; gap: 14px; }
.form .linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .linha.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto2); margin-bottom: 6px; }
/* campo "outlined": o contorno envolve rótulo + entrada, sem parecer formulário HTML cru */
.form > div:has(> label + input), .form > div:has(> label + select), .form > div:has(> label + textarea), .form .linha > div:has(> label + input), .form .linha > div:has(> label + select), .form .linha > div:has(> label + textarea), .campo { border: 1px solid var(--borda2); border-radius: 12px; padding: 8px 12px 6px; background: var(--bg2); transition: border .15s, box-shadow .15s; position: relative; }
.form > div:has(> label + input):focus-within, .form > div:has(> label + select):focus-within, .form > div:has(> label + textarea):focus-within, .form .linha > div:has(> label + input):focus-within, .form .linha > div:has(> label + select):focus-within, .form .linha > div:has(> label + textarea):focus-within, .campo:focus-within { border-color: var(--cor); box-shadow: var(--anel); }
.form div:has(> label + input) > label, .form div:has(> label + select) > label, .form div:has(> label + textarea) > label, .campo > label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto3); margin-bottom: 2px; font-weight: 600; }
.form div:has(> label + input) > input, .form div:has(> label + select) > select, .form div:has(> label + textarea) > textarea, .campo > input, .campo > select, .campo > textarea { border: none !important; padding: 3px 0 4px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.form div:has(> label + input) > .ajuda, .form div:has(> label + select) > .ajuda, .form div:has(> label + textarea) > .ajuda { margin-top: 2px; }
.form div:has(> label + input[type=color]) > input { height: 32px; padding: 0 !important; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--borda2); border-radius: var(--raio-sm); font: inherit; background: var(--bg2); color: var(--texto); transition: border .15s, box-shadow .15s; }
input[type=color] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--borda2); border-radius: var(--raio-sm); background: var(--bg2); }
input:focus, select:focus, textarea:focus { border-color: var(--cor); box-shadow: var(--anel); outline: none; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px !important; }
input:disabled, select:disabled { opacity: .6; background: var(--bg3); }
textarea { min-height: 90px; resize: vertical; }
textarea.codigo { font-family: var(--mono); font-size: 12.5px; min-height: 280px; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--texto); cursor: pointer; padding: 5px 0; }
.check input { width: 17px; height: 17px; accent-color: var(--cor); margin: 0; }
.ajuda { font-size: 12px; color: var(--texto2); margin-top: 5px; line-height: 1.45; }
.segment { display: inline-flex; border: 1px solid var(--borda2); border-radius: 8px; overflow: hidden; }
.segment label { margin: 0; cursor: pointer; }
.segment input { display: none; }
.segment span { display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--texto2); background: var(--bg2); border-right: 1px solid var(--borda2); }
.segment label:last-child span { border-right: none; }
.segment input:checked + span { background: var(--cor); color: #fff; }

/* ---------- estados vazios / alertas ---------- */
.vazio { text-align: center; padding: 48px 20px; color: var(--texto2); }
.vazio svg { width: 64px; height: 64px; color: var(--borda2); margin-bottom: 10px; }
.vazio b { display: block; color: var(--texto); font-size: 15.5px; margin-bottom: 4px; }
.vazio .btn { margin-top: 14px; }
.alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid; margin-bottom: 16px; font-size: 13.5px; }
.alerta svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alerta.erro { background: var(--erro-bg); border-color: color-mix(in srgb, var(--erro) 30%, transparent); color: var(--erro); }
.alerta.aviso { background: var(--aviso-bg); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); color: var(--aviso); }
.alerta.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.alerta b { font-weight: 650; }
.passos-inicio { counter-reset: p; display: grid; gap: 10px; }
.passos-inicio div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 13.5px; color: var(--texto2); }
.passos-inicio div::before { counter-increment: p; content: counter(p); width: 28px; height: 28px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); font-weight: 700; display: grid; place-items: center; font-size: 12.5px; }
.passos-inicio b { color: var(--texto); display: block; }

/* ---------- gráficos (svg puro) ---------- */
.grafico { width: 100%; height: 220px; display: block; }
.grafico .barra-svg { fill: var(--cor); opacity: .9; transition: opacity .15s; } .grafico .barra-svg:hover { opacity: 1; }
.grafico .barra-svg.b2 { fill: var(--cor2); }
.grafico .eixo { stroke: var(--borda); stroke-width: 1; }
.grafico text { fill: var(--texto3); font-size: 10.5px; font-family: var(--fonte); }
.legenda { display: flex; gap: 16px; font-size: 12px; color: var(--texto2); margin-top: 6px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.anel-wrap { display: flex; align-items: center; gap: 18px; }
.anel-svg { width: 110px; height: 110px; flex-shrink: 0; }
.anel-svg .fundo { stroke: var(--borda); fill: none; } .anel-svg .valor { stroke: var(--cor); stroke-linecap: round; fill: none; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.anel-svg text { fill: var(--texto); font-weight: 700; font-size: 20px; font-family: var(--fonte); }

/* ---------- instâncias ---------- */
.instancias { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.inst { position: relative; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.inst::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--borda2); }
.inst.conectado::before { background: linear-gradient(90deg, var(--ok), #7fe0a3); }
.inst.qr::before, .inst.conectando::before { background: linear-gradient(90deg, var(--aviso), #ffd18a); }
.inst.banido::before { background: var(--erro); }
.inst:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.inst .cab { display: flex; align-items: flex-start; gap: 12px; }
.inst .anel { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--bg3); color: var(--texto3); flex-shrink: 0; border: 1px solid var(--borda); }
.inst .anel svg { width: 22px; height: 22px; }
.inst .anel.conectado { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.inst .anel.qr, .inst .anel.conectando { background: var(--aviso-bg); color: var(--aviso); border-color: transparent; }
.inst .anel.banido { background: var(--erro-bg); color: var(--erro); border-color: transparent; }
.inst .titulo { font-weight: 650; font-size: 15px; }
.inst .numero { color: var(--texto2); font-size: 13px; }
.inst .dono { font-size: 12px; color: var(--texto3); }
.inst .chaves { display: grid; gap: 8px; }
.inst .chaves label { margin-bottom: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto3); }
.inst .rodape { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* ---------- modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(4, 12, 22, .55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.overlay.aberto { display: flex; }
.modal { background: var(--bg2); border-radius: 22px; width: 100%; max-width: 580px; max-height: 92vh; overflow-y: auto; box-shadow: var(--sombra-modal); animation: sobe .2s cubic-bezier(.2,.8,.2,1); border: 1px solid var(--borda); }
.modal.larga { max-width: 940px; }
.modal .cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--bg2); z-index: 1; }
.modal .corpo { padding: 22px 24px; }
.modal .pe { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--borda); position: sticky; bottom: 0; background: var(--bg2); }
.fechar { border: none; background: var(--bg3); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--texto2); }
.fechar:hover { background: var(--borda); }
@keyframes sobe { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; overflow-x: auto; }
.abas button { border: none; background: none; padding: 10px 14px; font-weight: 600; color: var(--texto2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-size: 13.5px; }
.abas button.ativa { color: var(--cor); border-color: var(--cor); }
[data-theme="escuro"] .abas button.ativa { color: #7cc4ef; border-color: #7cc4ef; }

.qr-box { text-align: center; padding: 10px; }
.qr-box img { width: 260px; height: 260px; border-radius: 14px; border: 1px solid var(--borda); background: #fff; padding: 8px; }
.qr-box .codigo { font-family: var(--mono); font-size: 28px; letter-spacing: .14em; background: var(--bg3); padding: 14px; border-radius: 12px; margin: 12px 0; border: 1px dashed var(--borda2); }
.passos { text-align: left; font-size: 13px; color: var(--texto2); margin: 14px auto 0; max-width: 340px; padding-left: 18px; }
.passos li { margin-bottom: 5px; }

.toast { position: fixed; right: 22px; bottom: 22px; background: #0f1720; color: #fff; padding: 12px 16px; border-radius: 12px; font-weight: 500; z-index: 99; box-shadow: var(--sombra-modal); animation: sobe .2s; max-width: 380px; font-size: 13.5px; }
.toast.erro { background: var(--erro); } .toast.ok { background: var(--ok); }

/* ---------- conversas ---------- */
.conversas { display: grid; grid-template-columns: 300px 1fr; border-radius: 18px; overflow: hidden; min-height: 500px; background: var(--bg2); box-shadow: var(--sombra); }
.conversas .lista { border-right: 1px solid var(--borda); overflow-y: auto; max-height: 600px; }
.conversas .lista > div { padding: 12px 14px; border-bottom: 1px solid var(--borda); cursor: pointer; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; }
.conversas .lista > div.vazio { display: block; }
.conversas .lista > div:hover, .conversas .lista > div.ativa { background: var(--bg3); }
.conversas .lista .av { width: 38px; height: 38px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.conversas .lista b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversas .lista small { color: var(--texto2); }
.conversas .msgs { padding: 18px; overflow-y: auto; max-height: 600px; display: flex; flex-direction: column; gap: 6px; background: var(--bg3); }
.balao { max-width: 70%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--bg2); border: 1px solid var(--borda); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.balao.enviada { align-self: flex-end; background: var(--cor-clara); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.balao small { display: block; font-size: 10.5px; color: var(--texto3); margin-top: 5px; text-align: right; }

.codigo-bloco { background: var(--codigo-bg); color: var(--codigo-texto); padding: 16px 18px; border-radius: 12px; font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre; position: relative; line-height: 1.55; }
.codigo-bloco button { position: absolute; top: 10px; right: 10px; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-lado { background: var(--side-bg); color: #fff; padding: 64px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login-lado::after { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cor2) 45%, transparent), transparent 65%); right: -200px; bottom: -220px; filter: blur(10px); }
.login-lado::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.07); left: -160px; top: -160px; }
.login-form .card { border-radius: 22px; box-shadow: var(--sombra-hover); }
.login-lado h1 { font-size: 36px; line-height: 1.15; margin-bottom: 16px; max-width: 520px; }
.login-lado p { opacity: .85; font-size: 16px; max-width: 460px; }
.login-lado ul { margin: 26px 0 0; padding: 0; list-style: none; }
.login-lado li { padding: 7px 0; display: flex; gap: 12px; align-items: center; font-size: 14.5px; }
.login-lado li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor2); flex-shrink: 0; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg); }
.login-form .card { width: 100%; max-width: 420px; padding: 34px; }
.login-form .card h2 { margin-bottom: 4px; font-size: 20px; }
.login-form .card .sub { color: var(--texto2); margin-bottom: 20px; font-size: 13.5px; }
.login-form .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-weight: 700; font-size: 18px; color: var(--cor); }
.login-form .logo img { height: 36px; }

/* ---------- planos ---------- */
.plano-card { border: 1.5px solid var(--borda); border-radius: var(--raio); padding: 20px; position: relative; background: var(--bg2); display: flex; flex-direction: column; }
.plano-card.atual { border-color: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 12%, transparent); }
.plano-card .preco { font-size: 28px; font-weight: 700; margin: 10px 0 2px; letter-spacing: -.03em; }
.plano-card .preco small { font-size: 13px; font-weight: 500; color: var(--texto2); letter-spacing: 0; }
.plano-card ul { padding-left: 18px; color: var(--texto2); font-size: 13px; margin: 10px 0; }
.plano-card .acoes { margin-top: auto; }

/* ---------- fluxos ---------- */
.fluxo-nos { display: grid; gap: 8px; }
.fluxo-no { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: 13px; background: var(--bg3); }
.fluxo-no b { font-family: var(--mono); color: var(--cor); }
.fluxo-no .tipo { float: right; }

/* ---------- equipe / permissões ---------- */
.perm-grid { display: grid; gap: 6px; }
.perm-linha { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--bg3); }
.perm-linha b { display: block; font-size: 13.5px; }
.perm-linha small { color: var(--texto2); }
.membro-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; }
.membro-card .av { width: 44px; height: 44px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); display: grid; place-items: center; font-weight: 700; }
.membro-card .perms { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips label { margin: 0; cursor: pointer; }
.chips input { display: none; }
.chips span { display: inline-block; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--borda2); font-size: 12.5px; font-weight: 500; color: var(--texto2); background: var(--bg2); }
.chips input:checked + span { background: var(--cor); color: #fff; border-color: var(--cor); }

/* ---------- timeline auditoria ---------- */
.timeline > div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.timeline > div:last-child { border-bottom: none; }
.timeline small { color: var(--texto3); }
.timeline code { font-size: 11.5px; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) { .grid.c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -280px; width: 264px; z-index: 40; transition: left .22s; }
  .sidebar.aberta { left: 0; box-shadow: 0 0 60px rgba(0,0,0,.5); }
  .menu-btn { display: inline-flex; }
  .conteudo { padding: 18px 16px 70px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; }
  .form .linha, .form .linha.c3 { grid-template-columns: 1fr; }
  .login-wrap { grid-template-columns: 1fr; } .login-lado { display: none; }
  .conversas { grid-template-columns: 1fr; } .conversas .lista { max-height: 220px; }
  .membro-card { grid-template-columns: 44px 1fr; } .membro-card .acoes { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } .topo { flex-direction: column; } }

/* ---------- inbox v2 ---------- */
.inbox { display: grid; grid-template-columns: 320px 1fr 280px; border-radius: 18px; overflow: hidden; background: var(--bg2); box-shadow: var(--sombra); min-height: 640px; height: calc(100vh - 210px); }
.inbox-lista { border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-width: 0; }
.inbox-filtros { padding: 12px; border-bottom: 1px solid var(--borda); display: grid; gap: 8px; }
.inbox-filtros .segment { width: 100%; } .inbox-filtros .segment label { flex: 1; } .inbox-filtros .segment span { display: block; text-align: center; padding: 5px 4px; font-size: 11px; }
.inbox-lista #lista { overflow-y: auto; flex: 1; }
.conv { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--borda); cursor: pointer; align-items: start; }
.conv:hover, .conv.ativa { background: var(--bg3); }
.conv.ativa { box-shadow: inset 3px 0 0 var(--cor); }
.conv.aguardando_humano .av { background: var(--aviso-bg); color: var(--aviso); }
.conv .av { width: 40px; height: 40px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.conv .txt { min-width: 0; }
.conv b { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .badge { background: var(--cor2); color: #fff; font-style: normal; font-size: 10.5px; border-radius: 99px; padding: 1px 7px; font-weight: 700; margin-left: 6px; }
.conv small { display: block; color: var(--texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.conv .meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.conv .meta .tag { padding: 1px 7px; font-size: 10px; }
.conv .hora { margin-left: auto; font-size: 10.5px; color: var(--texto3); }
.inbox-chat { display: flex; flex-direction: column; min-width: 0; background: var(--bg3); }
.inbox-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg2); border-bottom: 1px solid var(--borda); }
.inbox-cab .av { width: 40px; height: 40px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); display: grid; place-items: center; font-weight: 700; }
.inbox-cab b { display: block; font-size: 14.5px; } .inbox-cab small { color: var(--texto2); }
.inbox-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.inbox-msgs .midia { max-width: 280px; max-height: 280px; border-radius: 10px; display: block; }
.inbox-msgs .doc { display: inline-block; padding: 8px 10px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--borda); }
.inbox-compositor { background: var(--bg2); border-top: 1px solid var(--borda); padding: 10px 12px; position: relative; }
.comp-linha { display: flex; gap: 8px; align-items: flex-end; }
.comp-linha textarea { flex: 1; min-height: 42px; max-height: 160px; resize: none; border-radius: 12px; padding: 10px 12px; }
.comp-acoes { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.btn.icone.gravando { background: var(--erro); color: #fff; animation: pulso-rec 1s infinite; }
@keyframes pulso-rec { 50% { filter: brightness(1.3); } }
.rr-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 4px); background: var(--bg2); border: 1px solid var(--borda2); border-radius: 12px; box-shadow: var(--sombra-modal); max-height: 260px; overflow-y: auto; z-index: 5; }
.rr-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--borda); font-size: 13px; }
.rr-item:hover { background: var(--bg3); } .rr-item small { display: block; color: var(--texto2); } .rr-item b { font-family: var(--mono); color: var(--cor); margin-right: 4px; }
.inbox-lado { border-left: 1px solid var(--borda); overflow-y: auto; padding: 14px; background: var(--bg2); }
.lado-bloco { margin-bottom: 18px; } .lado-bloco h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto3); margin-bottom: 8px; }
@media (max-width: 1200px) { .inbox { grid-template-columns: 280px 1fr; } .inbox-lado { display: none; } }
@media (max-width: 900px) { .inbox { grid-template-columns: 1fr; height: auto; } .inbox-lista { max-height: 300px; } }

/* ---------- editor de fluxos ---------- */
.editor-fluxo { display: grid; grid-template-columns: 1fr 560px; gap: 16px; align-items: start; }
.nos-lista { display: grid; gap: 12px; }
.no-card { padding: 14px 16px; }
.no-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.no-cab .no-id { width: 170px !important; font-family: var(--mono); font-weight: 600; padding: 5px 8px !important; }
.no-cab select { width: auto; padding: 5px 30px 5px 8px !important; font-size: 12.5px; }
.opcoes { display: grid; gap: 6px; }
.opcao { display: grid; grid-template-columns: 64px 1fr auto 1fr auto; gap: 6px; align-items: center; }
.opcao input, .opcao select { padding: 6px 9px !important; }
.fluxograma text { font-family: var(--fonte); }
.mini-fluxo { background: var(--bg3); border-radius: 10px; padding: 6px; margin-top: 8px; }
@media (max-width: 1100px) { .editor-fluxo { grid-template-columns: 1fr; } #diagrama { position: static !important; } }