/* SynapseOne — sistema visual (site, painel do cliente e painel administrativo).
   Camada própria sobre o Bootstrap 5: tokens, tipografia e componentes.
   Uma família tipográfica (Archivo variável); a largura das letras muda de papel:
   expandida nos títulos, normal no texto, condensada nas tabelas. */

@font-face {
  font-family: "Archivo";
  src: url("../vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --so-blue: #0b5fff;
  --so-blue-deep: #0847c2;
  --so-sky: #2f8cff;
  --so-ink: #0e1b33;
  --so-ink-2: #3b4a66;
  --so-ink-3: #66728a;
  --so-cloud: #f3f6fb;
  --so-line: #d9e1ee;
  --so-white: #fff;

  /* Cores de estado: usadas somente para estado, sempre com texto ou forma junto. */
  --so-ok: #12855a;
  --so-ok-bg: #e4f3ec;
  --so-warn: #9a5a00;
  --so-warn-bg: #fbf0dd;
  --so-crit: #c42b2b;
  --so-crit-bg: #fbe9e9;
  --so-off: #7b8699;
  --so-off-bg: #eceff4;

  --so-radius-plate: 3px;
  --so-radius: 8px;
  --so-radius-lg: 14px;
  --so-measure: 68ch;

  --bs-font-sans-serif: "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--so-ink);
  --bs-body-color-rgb: 14, 27, 51;
  --bs-secondary-color: var(--so-ink-3);
  --bs-body-bg: var(--so-white);
  --bs-primary: var(--so-blue);
  --bs-primary-rgb: 11, 95, 255;
  --bs-link-color: var(--so-blue);
  --bs-link-color-rgb: 11, 95, 255;
  --bs-link-hover-color: var(--so-blue-deep);
  --bs-link-hover-color-rgb: 8, 71, 194;
  --bs-border-color: var(--so-line);
  --bs-border-radius: var(--so-radius);
  --bs-border-radius-lg: var(--so-radius-lg);
  --bs-emphasis-color: var(--so-ink);
  --bs-heading-color: var(--so-ink);
  --bs-focus-ring-color: rgba(11, 95, 255, .35);
}

html { scroll-behavior: smooth; }
body { font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ---------- Tipografia ---------- */
h1, h2, h3, .so-display { font-stretch: 112%; font-weight: 760; letter-spacing: -.018em; line-height: 1.08; color: var(--so-ink); }
h1, .so-display { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: 1.3125rem; line-height: 1.2; font-weight: 700; }
h4, h5, h6 { font-weight: 680; letter-spacing: -.005em; }
h4 { font-size: 1.125rem; }
p, li, dd { max-width: var(--so-measure); }
.so-lead { font-size: 1.1875rem; line-height: 1.5; color: var(--so-ink-2); max-width: 58ch; }
.so-small { font-size: .875rem; color: var(--so-ink-3); }
.so-num { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--so-ink-3) !important; }
a { text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--so-sky); outline-offset: 2px; border-radius: 3px; }

/* ---------- Botões ---------- */
.btn { font-weight: 620; border-radius: var(--so-radius); padding: .6rem 1.1rem; }
.btn-sm { padding: .35rem .75rem; }
.btn-lg { padding: .8rem 1.4rem; font-size: 1.0625rem; }
.btn-primary { --bs-btn-bg: var(--so-blue); --bs-btn-border-color: var(--so-blue); --bs-btn-hover-bg: var(--so-blue-deep); --bs-btn-hover-border-color: var(--so-blue-deep); --bs-btn-active-bg: #063a9e; --bs-btn-active-border-color: #063a9e; --bs-btn-disabled-bg: #8fb4ff; --bs-btn-disabled-border-color: #8fb4ff; }
.btn-outline-primary { --bs-btn-color: var(--so-blue); --bs-btn-border-color: var(--so-blue); --bs-btn-hover-bg: var(--so-blue); --bs-btn-hover-border-color: var(--so-blue); --bs-btn-active-bg: var(--so-blue-deep); }
.btn-ink { --bs-btn-color: #fff; --bs-btn-bg: var(--so-ink); --bs-btn-border-color: var(--so-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1b2c4f; --bs-btn-hover-border-color: #1b2c4f; }
.btn-quiet { --bs-btn-color: var(--so-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--so-line); --bs-btn-hover-bg: var(--so-cloud); --bs-btn-hover-border-color: #b9c6dc; --bs-btn-hover-color: var(--so-ink); }
.btn-danger { --bs-btn-bg: var(--so-crit); --bs-btn-border-color: var(--so-crit); --bs-btn-hover-bg: #a32121; --bs-btn-hover-border-color: #a32121; }
.btn-on-dark { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--so-ink); --bs-btn-hover-border-color: #fff; }

/* ---------- Formulários ---------- */
.form-label { font-weight: 620; font-size: .9375rem; margin-bottom: .3rem; }
.form-control, .form-select { border-color: #b9c6dc; border-radius: var(--so-radius); padding: .55rem .75rem; }
.form-control:focus, .form-select:focus { border-color: var(--so-blue); box-shadow: 0 0 0 3px rgba(11, 95, 255, .18); }
.form-text { color: var(--so-ink-3); }
.invalid-feedback { display: block; color: var(--so-crit); font-size: .875rem; }
.form-control.is-invalid { border-color: var(--so-crit); background-image: none; }

/* ---------- Estado: lâmpada + texto ---------- */
.so-status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .875rem; white-space: nowrap; }
.so-status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--so-off); flex: none; }
.so-status.is-ok { color: var(--so-ok); } .so-status.is-ok::before { background: var(--so-ok); }
.so-status.is-warn { color: var(--so-warn); } .so-status.is-warn::before { background: #e08a00; border-radius: 2px; transform: rotate(45deg); }
.so-status.is-crit { color: var(--so-crit); } .so-status.is-crit::before { background: var(--so-crit); border-radius: 1px; }
.so-status.is-off { color: var(--so-ink-3); } .so-status.is-off::before { background: transparent; border: 2px solid var(--so-off); }
.so-tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--so-off-bg); color: var(--so-ink-2); white-space: nowrap; }
.so-tag.is-ok { background: var(--so-ok-bg); color: var(--so-ok); }
.so-tag.is-warn { background: var(--so-warn-bg); color: var(--so-warn); }
.so-tag.is-crit { background: var(--so-crit-bg); color: var(--so-crit); }
.so-tag.is-info { background: #e3edff; color: var(--so-blue-deep); }

/* ---------- Placa de patrimônio (assinatura visual) ---------- */
.so-plate { position: relative; background: #fff; border: 1.5px solid var(--so-ink); border-radius: var(--so-radius-plate); padding: .7rem .85rem .6rem; min-width: 0; color: var(--so-ink); }
.so-plate::before, .so-plate::after { content: ""; position: absolute; top: .45rem; width: .32rem; height: .32rem; border-radius: 50%; border: 1.5px solid #9aa7bd; }
.so-plate::before { left: .45rem; } .so-plate::after { right: .45rem; }
.so-plate__label { font-size: .6875rem; font-weight: 600; color: var(--so-ink-3); text-align: center; letter-spacing: .02em; }
.so-plate__number { font-stretch: 78%; font-weight: 800; font-size: 1.5rem; line-height: 1.05; letter-spacing: .01em; text-align: center; font-variant-numeric: tabular-nums; }
.so-plate__bars { height: .9rem; margin: .35rem .2rem .45rem; background: repeating-linear-gradient(90deg, var(--so-ink) 0 2px, transparent 2px 3px, var(--so-ink) 3px 4px, transparent 4px 7px, var(--so-ink) 7px 10px, transparent 10px 12px, var(--so-ink) 12px 13px, transparent 13px 17px); }
.so-plate__host { font-stretch: 90%; font-weight: 650; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-plate__fact { font-size: .75rem; color: var(--so-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-plate__foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--so-line); }
.so-plate.is-warn { border-color: #e08a00; box-shadow: 0 0 0 3px var(--so-warn-bg); }
.so-plate.is-crit { border-color: var(--so-crit); box-shadow: 0 0 0 3px var(--so-crit-bg); }
.so-plate.is-off { border-style: dashed; border-color: var(--so-off); background: #fafbfd; }

/* ---------- Site: cabeçalho, seções, rodapé ---------- */
.so-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 2000; }
.so-skip:focus { left: .5rem; top: .5rem; }
.so-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--so-line); }
.so-header .navbar { padding-block: .7rem; }
.so-brand { display: inline-flex; align-items: center; gap: .6rem; font-stretch: 112%; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em; color: var(--so-ink); text-decoration: none; }
.so-brand img { width: 2rem; height: 2rem; border-radius: 7px; }
.so-header .nav-link { color: var(--so-ink-2); font-weight: 560; padding-inline: .8rem !important; border-radius: 6px; }
.so-header .nav-link:hover, .so-header .nav-link[aria-current="page"] { color: var(--so-ink); background: var(--so-cloud); }
/* No celular as colunas ficam empilhadas; a calha larga só faria a linha passar da borda da tela. */
@media (max-width: 575.98px) { .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; } }
.so-section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.so-section--cloud { background: var(--so-cloud); }
.so-section--ink { background: var(--so-ink); color: #dbe4f5; }
.so-section--ink h2, .so-section--ink h3 { color: #fff; }
.so-section--ink a { color: #9cc4ff; }
.so-section--tight { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.so-footer { background: var(--so-ink); color: #b7c3da; padding-block: 3.5rem 2rem; font-size: .9375rem; }
.so-footer a { color: #dbe4f5; text-decoration: none; }
.so-footer a:hover { color: #fff; text-decoration: underline; }
.so-footer h2 { font-size: .9375rem; font-stretch: 100%; font-weight: 680; letter-spacing: 0; color: #fff; margin-bottom: .8rem; }
.so-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.so-crumbs { font-size: .875rem; color: var(--so-ink-3); padding-top: 1.5rem; }
.so-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.so-crumbs li + li::before { content: "/"; margin-right: .4rem; color: #a9b5c9; }
.so-crumbs a { color: var(--so-ink-3); }

/* Topo da página inicial: texto à esquerda, mural de placas à direita. */
.so-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); background: linear-gradient(180deg, #fff 0%, var(--so-cloud) 100%); }
.so-hero__wall { display: grid; grid-template-columns: repeat(4, minmax(9.5rem, 1fr)); gap: .8rem; width: 46rem; max-width: none; transform: rotate(-3deg); transform-origin: top left; }
.so-hero__wall .so-plate { opacity: 0; animation: so-report-in .5s ease-out forwards; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
@keyframes so-report-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .so-hero__wall .so-plate { opacity: 1; animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 991.98px) { .so-hero__wall { grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); width: 34rem; margin-top: 2.5rem; } }
@media (max-width: 575.98px) { .so-hero__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; transform: none; } .so-hero__wall .so-plate:nth-child(n+7) { display: none; } }

/* Ficha técnica: listas de definição em colunas, no lugar de grades de cartões. */
.so-spec { border-top: 2px solid var(--so-ink); }
.so-spec__group { padding-block: 1.4rem; border-bottom: 1px solid var(--so-line); display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 1rem 2.5rem; }
.so-spec__group h3 { margin: 0; font-size: 1.125rem; }
.so-spec__group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem 2rem; }
.so-spec__group li { padding-left: 1.2rem; position: relative; color: var(--so-ink-2); }
.so-spec__group li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: 2px; background: var(--so-blue); }
@media (max-width: 767.98px) { .so-spec__group { grid-template-columns: 1fr; } }

.so-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.so-steps li { counter-increment: step; padding-top: 1rem; border-top: 2px solid var(--so-ink); max-width: none; }
.so-steps li::before { content: counter(step); display: block; font-stretch: 78%; font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--so-blue); margin-bottom: .6rem; }
.so-steps h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.so-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.so-check li { padding-left: 1.6rem; position: relative; }
.so-check li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .8rem; height: .45rem; border-left: 2.5px solid var(--so-ok); border-bottom: 2.5px solid var(--so-ok); transform: rotate(-45deg); }
.so-check.is-no li::before { border: 0; width: .8rem; height: 2.5px; top: .72em; background: var(--so-crit); transform: none; }
.so-section--ink .so-check li::before { border-color: #6fe0b0; }
.so-section--ink .so-check.is-no li::before { background: #ff9c9c; }

/* Planos */
.so-plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.so-plan { border: 1px solid var(--so-line); border-radius: var(--so-radius-lg); padding: 1.75rem 1.5rem; background: #fff; }
.so-plan.is-featured { border: 2px solid var(--so-ink); }
.so-plan__name { font-size: 1.375rem; margin: 0 0 .25rem; }
.so-plan__price { font-stretch: 84%; font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.so-plan__price small { font-stretch: 100%; font-weight: 500; font-size: .9375rem; color: var(--so-ink-3); letter-spacing: 0; }
/* Tabela de comparação. Em telas largas não rola para o lado e o cabeçalho acompanha a
   página; em telas estreitas rola para o lado e a coluna do recurso fica fixa. As bordas
   são separadas para acompanharem as células fixas. */
.so-compare-wrap { overflow-x: auto; }
.so-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.so-compare th, .so-compare td { padding: .65rem .75rem; border-bottom: 1px solid var(--so-line); text-align: center; vertical-align: top; }
.so-compare th[scope="row"], .so-compare td:first-child { text-align: left; font-weight: 560; }
.so-compare thead th { background: #fff; border-bottom: 2px solid var(--so-ink); font-size: 1rem; }
.so-compare thead th:first-child { text-align: left; }
.so-compare .is-group th { background: var(--so-cloud); text-align: left; font-weight: 700; }
@media (min-width: 768px) {
  .so-compare-wrap { overflow: visible; }
  .so-compare thead th { position: sticky; top: var(--so-sticky-top, 3.9rem); z-index: 2; }
}
@media (max-width: 767.98px) {
  .so-compare { font-size: .875rem; }
  .so-compare th, .so-compare td { padding: .55rem .5rem; }
  .so-compare thead th { font-size: .875rem; }
  .so-compare--plans th[scope="row"], .so-compare--plans thead th:first-child { position: sticky; left: 0; z-index: 1; width: 8.5rem; min-width: 8.5rem; background: #fff; box-shadow: 1px 0 0 var(--so-line); }
  .so-compare--plans td, .so-compare--plans thead th + th { min-width: 6.5rem; }
  .so-compare--plans .is-group span { position: sticky; left: .5rem; display: inline-block; }
  /* Lista de recursos: cada linha vira um bloco, sem rolagem lateral. */
  .so-compare--list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .so-compare--list, .so-compare--list tbody, .so-compare--list tr, .so-compare--list th, .so-compare--list td { display: block; }
  .so-compare--list th[scope="row"] { border-bottom: 0; padding-bottom: 0; font-weight: 680; }
  .so-compare--list td { border-bottom: 0; padding-block: .15rem; text-align: left; font-weight: 400; }
  .so-compare--list tr:not(.is-group) { padding-block: .35rem .6rem; border-bottom: 1px solid var(--so-line); }
  .so-compare--list td:last-child { color: var(--so-ink-3); }
}
.so-yes { color: var(--so-ok); font-weight: 700; } .so-no { color: #a9b5c9; }

/* Conteúdo editorial (blog, ajuda, páginas legais) */
.so-prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.65; }
.so-prose h2 { margin-top: 2.4rem; margin-bottom: .8rem; font-size: 1.6rem; }
.so-prose h3 { margin-top: 1.8rem; margin-bottom: .5rem; }
.so-prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: .9375rem; }
.so-prose th, .so-prose td { border-bottom: 1px solid var(--so-line); padding: .55rem .6rem; text-align: left; vertical-align: top; }
.so-prose thead th { border-bottom: 2px solid var(--so-ink); }
.so-prose blockquote { border-left: 3px solid var(--so-blue); padding-left: 1rem; color: var(--so-ink-2); margin-block: 1.5rem; }
.so-prose code { background: var(--so-cloud); padding: .1em .35em; border-radius: 4px; font-size: .9em; color: var(--so-ink); }
.so-prose pre { background: var(--so-ink); color: #e6edfb; padding: 1rem 1.1rem; border-radius: var(--so-radius); overflow-x: auto; }
.so-prose pre code { background: none; color: inherit; padding: 0; }
.so-faq details { border-bottom: 1px solid var(--so-line); padding-block: 1rem; }
.so-faq summary { cursor: pointer; font-weight: 650; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.so-faq summary::-webkit-details-marker { display: none; }
.so-faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--so-blue); }
.so-faq details[open] summary::after { content: "−"; }
.so-faq details > div { padding-top: .6rem; color: var(--so-ink-2); }
.so-cardlink { display: block; padding: 1.25rem 0; border-top: 1px solid var(--so-line); text-decoration: none; color: inherit; }
.so-cardlink:hover h3 { color: var(--so-blue); text-decoration: underline; }
.so-cardlink h3 { margin-bottom: .3rem; font-size: 1.1875rem; }
.so-cardlink p { margin: 0; color: var(--so-ink-2); }

/* ---------- Painéis (cliente e administração) ---------- */
/* --so-sticky-top: altura da barra superior fixa, para cabeçalhos de tabela que acompanham a rolagem. */
.so-shell { --so-sticky-top: 3rem; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; background: var(--so-cloud); }
.so-side { background: var(--so-ink); color: #c5d0e6; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.so-side__brand { padding: 1.1rem 1.25rem; }
.so-side__brand .so-brand { color: #fff; }
.so-side nav { padding: .25rem .65rem 1rem; flex: 1; }
.so-side__group { font-size: .75rem; font-weight: 650; color: #8091b3; padding: 1rem .65rem .35rem; }
.so-side a.so-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; border-radius: 6px; color: #c5d0e6; text-decoration: none; font-weight: 540; font-size: .9375rem; }
.so-side a.so-nav:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.so-side a.so-nav[aria-current="page"] { background: #fff; color: var(--so-ink); font-weight: 680; }
.so-side a.so-nav.is-locked { color: #7f8fb0; }
.so-side__count { font-size: .75rem; font-weight: 700; background: var(--so-crit); color: #fff; border-radius: 999px; padding: 0 .45rem; font-variant-numeric: tabular-nums; }
.so-side__foot { padding: .9rem 1.25rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8125rem; }
.so-side--admin { background: #1c1430; }
.so-main { min-width: 0; display: flex; flex-direction: column; }
.so-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2rem); background: #fff; border-bottom: 1px solid var(--so-line); position: sticky; top: 0; z-index: 1020; }
.so-content { padding: clamp(1rem, 3vw, 2rem); flex: 1; max-width: 92rem; width: 100%; }
.so-page-title { font-size: 1.75rem; font-stretch: 108%; margin: 0; }
.so-page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.so-page-head p { margin: .25rem 0 0; color: var(--so-ink-3); }
@media (max-width: 991.98px) {
  .so-shell { grid-template-columns: minmax(0, 1fr); }
  .so-side { position: fixed; inset: 0 auto 0 0; width: 16.5rem; z-index: 1045; transform: translateX(-100%); transition: transform .2s ease; }
  .so-side.is-open { transform: none; box-shadow: 0 0 0 100vmax rgba(14, 27, 51, .5); }
}
@media (min-width: 992px) { .so-menu-btn { display: none; } }

.so-panel { background: #fff; border: 1px solid var(--so-line); border-radius: var(--so-radius-lg); }
.so-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--so-line); }
.so-panel__head h2, .so-panel__head h3 { font-size: 1.0625rem; font-stretch: 100%; font-weight: 700; letter-spacing: 0; margin: 0; }
.so-panel__body { padding: 1.15rem; }
.so-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.so-kpi { background: #fff; border: 1px solid var(--so-line); border-radius: var(--so-radius-lg); padding: 1rem 1.15rem; text-decoration: none; color: inherit; display: block; }
a.so-kpi:hover { border-color: #b9c6dc; }
.so-kpi__label { font-size: .875rem; color: var(--so-ink-3); font-weight: 560; }
.so-kpi__value { font-stretch: 84%; font-weight: 800; font-size: 2.25rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.so-kpi__note { font-size: .8125rem; color: var(--so-ink-3); }
/* No celular os indicadores ficam dois por linha, em vez de um cartão por tela. */
@media (max-width: 575.98px) {
  .so-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .so-kpi { padding: .8rem .9rem; }
  .so-kpi__value { font-size: min(1.75rem, 6.2vw); }
}
.so-kpi.is-crit .so-kpi__value { color: var(--so-crit); }
.so-kpi.is-warn .so-kpi__value { color: var(--so-warn); }

/* position: relative contém os rótulos .visually-hidden (absolutos) das células: sem isso eles
   escapam da rolagem da tabela e alargam a página no celular. */
.so-table-wrap { overflow-x: auto; position: relative; }
.so-table { width: 100%; border-collapse: collapse; font-stretch: 94%; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.so-table th { text-align: left; font-weight: 650; font-size: .8125rem; color: var(--so-ink-3); padding: .6rem 1.15rem; border-bottom: 1px solid var(--so-line); white-space: nowrap; background: #fbfcfe; }
.so-table td { padding: .65rem 1.15rem; border-bottom: 1px solid #e9eef6; vertical-align: middle; }
.so-table tr:last-child td { border-bottom: 0; }
.so-table tbody tr:hover { background: #f8fafd; }
.so-table .is-num { text-align: right; white-space: nowrap; }
.so-table a.so-rowlink { font-weight: 650; color: var(--so-ink); text-decoration: none; }
.so-table a.so-rowlink:hover { color: var(--so-blue); text-decoration: underline; }
.so-table td .so-sub { display: block; font-size: .8125rem; color: var(--so-ink-3); }
.so-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .45rem 1.25rem; margin: 0; font-size: .9375rem; }
.so-dl dt { color: var(--so-ink-3); font-weight: 540; }
.so-dl dd { margin: 0; max-width: none; overflow-wrap: anywhere; }
/* Em colunas laterais estreitas o rótulo ocupa uma fração fixa, para o valor não quebrar no meio. */
.so-dl--side { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: .5rem .9rem; }
.so-dl--side dd { overflow-wrap: break-word; }
@media (max-width: 575.98px) { .so-dl { grid-template-columns: 1fr; gap: .1rem; } .so-dl dd { margin-bottom: .5rem; } }

.so-meter { display: flex; align-items: center; gap: .5rem; min-width: 7rem; }
.so-meter__track { flex: 1; height: .4rem; background: #e6ecf5; border-radius: 999px; overflow: hidden; }
.so-meter__fill { display: block; height: 100%; background: var(--so-sky); border-radius: 999px; }
.so-meter__fill.is-warn { background: #e08a00; } .so-meter__fill.is-crit { background: var(--so-crit); }
.so-meter__value { font-size: .8125rem; font-weight: 600; min-width: 2.6rem; text-align: right; }
/* Variante compacta para listas largas: o valor em cima, a barra embaixo. */
.so-meter--stack { display: grid; gap: .25rem; min-width: 4.25rem; }
.so-meter--stack .so-meter__value { order: -1; min-width: 0; text-align: left; }
.so-table td.so-col-main { min-width: 13rem; }

.so-empty { text-align: center; padding: 3rem 1.5rem; }
.so-empty h2, .so-empty h3 { font-size: 1.25rem; font-stretch: 100%; margin-bottom: .4rem; }
.so-empty p { margin-inline: auto; color: var(--so-ink-2); max-width: 46ch; }
.so-tabs { display: flex; gap: .25rem; box-shadow: inset 0 -1px 0 var(--so-line); margin-bottom: 1.25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.so-tabs a { padding: .6rem .9rem; font-weight: 600; color: var(--so-ink-3); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.so-tabs a:hover { color: var(--so-ink); }
.so-tabs a[aria-current="page"] { color: var(--so-ink); border-bottom-color: var(--so-blue); }
.so-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.so-filters .form-control, .so-filters .form-select { width: auto; min-width: 10rem; }
@media (min-width: 576px) { .so-filters input[type="search"] { min-width: 17rem; } }
/* No celular: dois filtros por linha, com a busca na largura toda, para a lista aparecer logo. */
@media (max-width: 575.98px) {
  .so-filters > div { flex: 1 1 calc(50% - .3rem); min-width: 0; }
  .so-filters > div:has(> input[type="search"]) { flex-basis: 100%; }
  .so-filters .form-control, .so-filters .form-select { width: 100%; min-width: 0; }
}
.so-flash { border-radius: var(--so-radius); padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; font-weight: 540; display: flex; gap: .75rem; justify-content: space-between; align-items: start; }
.so-flash.is-success { background: var(--so-ok-bg); border-color: #b6dfcc; color: #0c5c3e; }
.so-flash.is-error { background: var(--so-crit-bg); border-color: #f0c2c2; color: #8f1f1f; }
.so-flash.is-warning { background: var(--so-warn-bg); border-color: #ecd3a3; color: #6f4100; }
.so-flash.is-info { background: #e3edff; border-color: #bcd2ff; color: #063a9e; }
.so-flash button { background: none; border: 0; font-size: 1.2rem; line-height: 1; color: inherit; opacity: .7; }
.so-banner { padding: .6rem clamp(1rem, 3vw, 2rem); font-size: .9375rem; font-weight: 560; border-bottom: 1px solid transparent; }
.so-banner.is-warn { background: var(--so-warn-bg); color: #6f4100; border-color: #ecd3a3; }
.so-banner.is-crit { background: var(--so-crit-bg); color: #8f1f1f; border-color: #f0c2c2; }
.so-banner.is-info { background: #e3edff; color: #063a9e; border-color: #bcd2ff; }
.so-code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .875rem; background: var(--so-ink); color: #e6edfb; padding: .8rem 1rem; border-radius: var(--so-radius); overflow-x: auto; white-space: pre; display: block; }
.so-secret { font-family: Consolas, "Cascadia Mono", monospace; font-size: 1rem; background: var(--so-cloud); border: 1px dashed #9fb0cc; padding: .6rem .8rem; border-radius: var(--so-radius); overflow-wrap: anywhere; display: block; }
.so-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1.15rem; border-top: 1px solid var(--so-line); font-size: .875rem; color: var(--so-ink-3); }
.so-pagination ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.so-pagination a, .so-pagination span.is-current { display: inline-block; min-width: 2rem; padding: .25rem .5rem; text-align: center; border-radius: 6px; text-decoration: none; font-weight: 600; color: var(--so-ink-2); }
.so-pagination a:hover { background: var(--so-cloud); }
.so-pagination span.is-current { background: var(--so-ink); color: #fff; }

/* Telas de entrada (login, cadastro) */
.so-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
.so-auth__aside { background: var(--so-ink); color: #dbe4f5; padding: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; }
.so-auth__aside h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.so-auth__form { padding: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; background: #fff; }
.so-auth__form h1 { font-size: 1.75rem; margin-bottom: .35rem; }
@media (max-width: 991.98px) { .so-auth { grid-template-columns: minmax(0, 1fr); } .so-auth__aside { display: none; } }

/* Gráficos em SVG gerados no servidor */
.so-chart { width: 100%; height: auto; display: block; overflow: visible; }
.so-chart text { font-family: inherit; font-size: 11px; fill: var(--so-ink-3); font-variant-numeric: tabular-nums; }
.so-chart .grid { stroke: #e6ecf5; stroke-width: 1; }
.so-chart .axis { stroke: #b9c6dc; stroke-width: 1; }
.so-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8125rem; color: var(--so-ink-2); margin: 0; padding: 0; list-style: none; }
.so-legend li { display: inline-flex; align-items: center; gap: .4rem; max-width: none; }
.so-legend i { width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.so-bar-row { display: grid; grid-template-columns: minmax(6rem, min(42%, 21rem)) 1fr auto; gap: .75rem; align-items: center; padding-block: .35rem; font-size: .9375rem; }
.so-bar-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No celular o rótulo ocupa a linha de cima; a barra e o valor ficam embaixo. */
@media (max-width: 575.98px) {
  .so-bar-row { grid-template-columns: 1fr auto; gap: .2rem .75rem; }
  .so-bar-row__label { grid-column: 1 / -1; }
}
.so-bar-row__track { height: .7rem; background: #edf1f7; border-radius: 3px; overflow: hidden; display: flex; }
.so-bar-row__track span { display: block; height: 100%; }
.so-bar-row__value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .875rem; white-space: nowrap; }

@media print {
  .so-side, .so-top, .so-header, .so-footer, .btn, .so-filters, .so-pagination ul { display: none !important; }
  .so-shell { display: block; background: #fff; }
  .so-content { padding: 0; }
  .so-panel { border: 0; }
}

/* ---- Visualização de tela em tempo real ---- */
.so-screen { overflow: hidden; }
.so-screen__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--so-line); }
.so-screen__stage { position: relative; display: flex; align-items: center; justify-content: center; background: #0b1220; min-height: 18rem; }
.so-screen__stage canvas { display: none; max-width: 100%; max-height: calc(100vh - 16rem); width: auto; height: auto; object-fit: contain; }
.so-screen__stage canvas.has-frame { display: block; }
.so-screen__stage canvas.is-stale { opacity: .55; }
.so-screen__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem; text-align: center; color: #e8eefc; }
.so-screen__overlay[hidden] { display: none; }
.so-screen__overlay p { max-width: 38rem; margin: 0; color: #c5d0e6; }
.so-screen__overlay.is-over-frame { background: rgba(11, 18, 32, .55); }
.so-screen__meta { padding: .75rem 1rem; border-top: 1px solid var(--so-line); grid-template-columns: repeat(4, auto 1fr); gap: .25rem 1rem; }
.so-screen__stage:fullscreen { min-height: 100vh; }
.so-screen__stage:fullscreen canvas { max-height: 100vh; width: 100vw; height: 100vh; }
@media (max-width: 767.98px) { .so-screen__meta { grid-template-columns: auto 1fr; } .so-screen__stage canvas { max-height: 60vh; } }