:root {
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #f8fafd; --line: #e3e8f0;
  --text: #1b2433; --muted: #627085; --brand: #1f4e79; --brand-2: #2f6db0; --brand-soft: #e7f0fa;
  --ok: #197c4a; --ok-bg: #e3f5ea; --warn: #a15c00; --warn-bg: #fff2d6; --err: #b3261e; --err-bg: #fde7e5;
  --shadow: 0 1px 2px rgba(20, 35, 60, .06), 0 4px 14px rgba(20, 35, 60, .05);
  --radius: 12px; --btn: #1f4e79;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171b26; --surface: #222836; --surface-2: #2a3142; --line: #323a4d;
    --text: #dfe5ef; --muted: #a3adbf; --brand: #7cabf2; --brand-2: #7cabf2; --brand-soft: #2a3a57;
    --ok: #5fd39b; --ok-bg: #1e3a30; --warn: #f0b75c; --warn-bg: #3d3122; --err: #f58a80; --err-bg: #40282a;
    --shadow: 0 2px 6px rgba(0, 0, 0, .25); --btn: #2f6ccc;
  }
}
* { box-sizing: border-box; }
/* tema escolhido pelo usuario (botao no topo) vence a preferencia do sistema */
:root[data-theme="dark"] {
    --bg: #171b26; --surface: #222836; --surface-2: #2a3142; --line: #323a4d;
    --text: #dfe5ef; --muted: #a3adbf; --brand: #7cabf2; --brand-2: #7cabf2; --brand-soft: #2a3a57;
    --ok: #5fd39b; --ok-bg: #1e3a30; --warn: #f0b75c; --warn-bg: #3d3122; --err: #f58a80; --err-bg: #40282a;
    --shadow: 0 2px 6px rgba(0, 0, 0, .25); --btn: #2f6ccc;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
html { color-scheme: light dark; }
.tema { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0; }
.tema:hover { background: var(--surface-2); }
.tema svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema .i-sol { display: none; }
:root[data-theme="dark"] .tema .i-sol { display: inline; } :root[data-theme="dark"] .tema .i-lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .i-sol { display: inline; } :root:not([data-theme="light"]) .tema .i-lua { display: none; }
}
.tema-flutuante { position: fixed; top: 14px; right: 14px; z-index: 5; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* layout */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0;
  height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; font-weight: 700; color: var(--text); }
.brand .logo-marca { height: 31px; width: auto; flex: none; }
/* logo completo: versao clara ou escura conforme o tema (mesma logica dos tokens de cor) */
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 0 16px; }
.ficha-topo { display: flex; align-items: center; gap: 18px; margin: 0 0 12px; }
.ficha-topo h1 { margin: 0; }
.ficha-topo img { flex: none; }
.logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-escuro { display: block; }
}
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-escuro { display: block; }
.side h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 10px 4px; }
.side a.nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.side a.nav:hover { background: var(--surface-2); text-decoration: none; }
.side a.nav.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.side svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side .grow { flex: 1; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 600; }
.content { padding: 24px 28px 48px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

/* cartoes */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.card .v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.card .l { color: var(--muted); font-size: 12px; }
.card.ok .v { color: var(--ok); } .card.alerta .v { color: var(--warn); } .card.erro .v { color: var(--err); }
.grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.bar-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 99px; }
.alert-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.alert-row:first-of-type { border-top: 0; }

/* filtros */
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
input, select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; min-height: 36px; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px;
  padding: 8px 14px; min-height: 36px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--btn); border-color: var(--btn); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); background: var(--btn); }
.btn.danger { color: var(--err); }
.btn.sm { padding: 4px 10px; min-height: 28px; font-size: 12px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* tabela */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
td.nw { white-space: nowrap; overflow-wrap: normal; }
td.wrap { min-width: 220px; }
th { white-space: nowrap; }
th { position: sticky; top: 0; background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
th a { color: inherit; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.alerta { background: var(--warn-bg); color: var(--warn); }
.badge.erro { background: var(--err-bg); color: var(--err); }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

/* mensagens */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid var(--line); }
.flash.aviso { background: var(--warn-bg); color: var(--warn); }
.flash.ok { background: var(--ok-bg); color: var(--ok); } .flash.erro { background: var(--err-bg); color: var(--err); }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); margin-bottom: 14px; }

/* login */
.center { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 500px at 20% -10%, var(--brand-soft), transparent), var(--bg); }
.login { width: 100%; max-width: 400px; }
.login .panel { padding: 28px; }
.login input { width: 100%; }
.code { letter-spacing: .5em; font-size: 24px; text-align: center; font-weight: 700; }
.devbox { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--warn); border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 12px; }
.devbox b { font-size: 18px; letter-spacing: .2em; }

/* admin */
.inline { display: inline; }
form.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--line);
  border-radius: 999px; margin: 2px 4px 2px 0; background: var(--surface-2); font-size: 12px; }
.tag button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 2px 6px; }
.tag button:hover { color: var(--err); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
  .side > * { flex: none; }
  .side form { margin-left: auto; }
  .side h3, .side .grow { display: none; }
  .brand { padding: 4px 8px; }
  .content { padding: 16px; } .top { padding: 12px 16px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* visao agrupada por cliente */
tr.g-head { cursor: pointer; background: var(--surface-2); user-select: none; }
tr.g-head:hover { background: var(--brand-soft); }
tr.g-head td { padding: 11px 14px; white-space: normal; border-bottom: 1px solid var(--line); }
tr.g-head:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
.g-seta { display: inline-block; width: 0; height: 0; margin-right: 10px; border-left: 6px solid var(--muted);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; vertical-align: middle; }
tr.g-head[aria-expanded="true"] .g-seta { transform: rotate(90deg); }
tr.g-row td:first-child { padding-left: 32px; }
.side { overflow-y: auto; }

/* cartoes clicaveis */
a.card.link { display: block; color: inherit; text-decoration: none; transition: transform .1s, border-color .1s; }
a.card.link:hover { border-color: var(--brand-2); transform: translateY(-1px); text-decoration: none; }
a.card.link.on { border-color: var(--brand-2); box-shadow: 0 0 0 2px var(--brand-soft); }

/* tabelas em telas estreitas: cada linha vira um cartao (rotulo: valor) */
@media (max-width: 900px) {
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tr { border-bottom: 1px solid var(--line); padding: 8px 4px; }
  .table-wrap td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 4px 12px; text-align: right; }
  .table-wrap td::before { content: attr(data-label); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: none; padding-top: 2px; }
  .table-wrap td.wrap { min-width: 0; }
  .table-wrap tr.g-head { padding: 0; }
  .table-wrap tr.g-head td { display: block; text-align: left; }
  .table-wrap tr.g-head td::before { content: none; }
  tr.g-row td:first-child { padding-left: 12px; }
  .filters .field { min-width: calc(50% - 6px); flex: 1; }
  .page-head .toolbar { width: 100%; }
}

/* filtros: campos com largura limitada (opcoes longas nao esticam a linha) */
.filters .field select, .filters .field input { width: 100%; max-width: 240px; }
.filters .field { flex: 0 1 auto; }
@media (max-width: 760px) { .filters .field select, .filters .field input { max-width: none; } }

@media (max-width: 760px) {
  .top { flex-wrap: wrap; padding: 10px 16px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 12px 14px; } .card .v { font-size: 22px; }
  .panel { padding: 14px; }
  .bar-row { grid-template-columns: 84px 1fr 36px; }
  .table-wrap td form.row, .table-wrap td.toolbar { justify-content: flex-end; }
  h1 { font-size: 20px; }
}

/* alinhamento: numeros, datas e selos centralizados (cabecalho junto); texto livre a esquerda */
.card { text-align: center; }
.card .s { color: var(--muted); font-size: 12px; margin-top: 2px; }
th.c, td.c { text-align: center; }
th.c a { display: inline-block; }
.alert-row .badge { flex: none; }
/* firewalls com firmware novo (Visao geral): versao atual -> disponivel, quebra em telas estreitas */
.fw-versao { flex: 0 1 auto; text-align: right; font-size: 12px; overflow-wrap: anywhere; }
.fw-versao b { color: var(--warn); }
.fw-mais > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
@media (max-width: 900px) { .table-wrap td.c { text-align: right; } }
.badge { white-space: nowrap; }
.table-wrap td:first-child { white-space: nowrap; }
.table-wrap td.wrap { white-space: normal; }
@media (max-width: 900px) { .table-wrap td:first-child { white-space: normal; } }
.btn { white-space: nowrap; }
th.grupo-th { border-bottom: 1px solid var(--line); letter-spacing: .08em; color: var(--text); }
.page-head > div:first-child { flex: 1 1 360px; min-width: 0; }
.page-head .toolbar { margin-left: auto; }

/* prioridade: Critica/Muito alta (solido), Alta (vermelho), Media (amarelo), Baixa (azul) */
.badge.info { background: var(--brand-soft); color: var(--brand); }
.badge.critico { background: var(--err); color: #fff; }

/* modo tempo real */
.tempo-real { gap: 8px; cursor: pointer; }
.tempo-real input { min-height: 0; width: 14px; height: 14px; margin: 0; accent-color: var(--ok); }
.tempo-real .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.tempo-real:has(input:checked) { border-color: var(--ok); color: var(--ok); }
.tempo-real:has(input:checked) .ponto { background: var(--ok); animation: pulsa 1.4s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(26,127,75,.6); } 70% { box-shadow: 0 0 0 7px rgba(26,127,75,0); } 100% { box-shadow: 0 0 0 0 rgba(26,127,75,0); } }

/* logo da GMX (fundo branco para funcionar nos dois temas) */
.logo-img { width: 54px; height: 54px; border-radius: 8px; background: #fff; padding: 2px; flex: none; object-fit: contain; border: 1px solid var(--line); }
.cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* menu lateral recolhivel (so no desktop) */
.top-esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.btn-menu { background: transparent; border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--text); cursor: pointer; flex: none; }
.btn-menu:hover { background: var(--surface-2); }
.btn-menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
@media (min-width: 901px) {
  .menu-recolhido .app { grid-template-columns: 64px 1fr; }
  .menu-recolhido .side { padding: 18px 8px; align-items: center; }
  .menu-recolhido .side .rot { display: none; }
  .menu-recolhido .side .brand { padding: 4px 0 16px; justify-content: center; }
  .menu-recolhido .side a.nav, .menu-recolhido .side .btn-sair { justify-content: center; padding: 10px 0; width: 44px; }
  .menu-recolhido .side h3 { height: 1px; width: 28px; background: var(--line); margin: 10px 0; font-size: 0; padding: 0; overflow: hidden; }
  .menu-recolhido .side form { width: 44px; }
}
@media (max-width: 900px) { .btn-menu { display: none; } }

/* assistente de onboarding */
.login:has(.assistente) { max-width: 760px; }
.assistente { padding: 24px; }
.assistente input[type=text], .assistente input[type=email], .assistente input[type=tel], .assistente input[type=number], .assistente select, .assistente textarea { width: 100%; }
.assistente fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 14px; padding: 10px 14px 14px; }
.assistente legend { font-weight: 600; padding: 0 6px; }
.assistente .field { margin-bottom: 10px; }
.assistente .opcao { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 400; }
.assistente .janela { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.assistente .condicional[hidden] { display: none; }
.assistente .invalido input, .assistente .invalido select, .assistente .invalido textarea { border-color: var(--err); }
.erro-campo { color: var(--err); font-size: 13px; }
.passos { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; }
.passos .atual a { font-weight: 700; text-decoration: underline; }
.cobertura { padding: 10px 14px; border-radius: 8px; margin: 10px 0; border: 1px solid var(--line); }
.cobertura.alerta { background: var(--err-bg); color: var(--err); } .cobertura.ok { background: var(--ok-bg); color: var(--ok); }
.assistente .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* admin: clientes em lista expansivel */
.cli-tabela { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cli-row { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr 2fr 70px 80px; gap: 12px; align-items: center; padding: 12px 16px; }
.cli-cab { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--surface-2, transparent); }
details.cli { border-bottom: 1px solid var(--line); }
details.cli:last-child { border-bottom: 0; }
details.cli > summary { list-style: none; cursor: pointer; }
details.cli > summary::-webkit-details-marker { display: none; }
details.cli > summary:hover { background: var(--brand-soft); }
details.cli[open] > summary { background: var(--brand-soft); }
details.cli.off .cli-row { opacity: .65; }
.c-dom { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.c-edit { color: var(--brand); font-size: 12px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
details.cli[open] .c-edit svg { transform: rotate(180deg); }
.c-vinc { display: flex; flex-wrap: wrap; gap: 4px; }
.vinc { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.vinc.ok { color: var(--brand); border-color: var(--brand-2); background: var(--brand-soft); }
.cli-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 16px; border-top: 1px dashed var(--line); }
.ed-box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ed-box h3 { margin: 0; font-size: 13px; }
.ed-box .field, .ed-box .par { width: 100%; }
.ed-box .field input { width: 100%; max-width: none; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.novo-cli > summary { list-style: none; display: inline-flex; cursor: pointer; }
.novo-cli > summary::-webkit-details-marker { display: none; }
.novo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; align-items: end; }
.novo-grid .field input { width: 100%; max-width: none; }
.novo-grid .chk { display: flex; gap: 6px; align-items: center; min-height: 36px; }
.novo-acao { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 900px) {
  .cli-cab { display: none; }
  .cli-row { grid-template-columns: 1fr 1fr; }
  .c-nome { grid-column: 1 / -1; font-size: 15px; }
  .c-dom { grid-column: 1 / -1; }
}
/* dica imediata nos botoes de icone (alem do title nativo) */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 20; white-space: nowrap;
  background: var(--text, #111); color: var(--surface, #fff); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; pointer-events: none; box-shadow: var(--shadow); }

.link-card { margin-bottom: 18px; border-color: var(--brand-2); }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.link-row b { min-width: 110px; }
.link-row input { flex: 1; min-width: 260px; font-family: ui-monospace, monospace; font-size: 12px; }

/* central de relatorios */
.cat { margin-bottom: 22px; }
.cat h2 { font-size: 16px; margin: 0 0 10px; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rel-card { display: flex; flex-direction: column; gap: 8px; }
.rel-card h3 { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.rel-card h3 svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rel-card p { margin: 0; }
.rel-card .toolbar { margin-top: auto; }
/* perfis e permissoes */
.perfis > summary { cursor: pointer; margin-bottom: 10px; }
.perfis .sim { color: var(--ok); font-weight: 700; }
.perfis .nao { color: var(--muted); }
.perfil-dica { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--brand-2); background: var(--brand-soft); border-radius: 6px; font-size: 13px; }
/* tour do cliente */
.tour { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(340px, calc(100vw - 40px)); background: var(--surface); color: var(--text); border: 1px solid var(--brand-2); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.28); padding: 16px; }
.tour h2 { margin: 2px 0 6px; font-size: 16px; }
.tour p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.tour .toolbar { justify-content: flex-end; }
.tour [hidden] { display: none; }
.tour-alvo { outline: 3px solid var(--brand-2); outline-offset: 2px; border-radius: 8px; position: relative; z-index: 40; background: var(--surface); }
.caixas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; max-height: 168px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.adic[open], .adic-novo[open] { margin-top: 4px; }
.adic summary, .adic-novo summary { cursor: pointer; margin-top: 6px; }
/* movimento: transicao entre paginas e entrada suave do conteudo (desligado com prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .side { view-transition-name: side; }
  .top { view-transition-name: top; }
  ::view-transition-group(side), ::view-transition-group(top) { animation-duration: 0s; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  @keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .content > * { animation: entra .28s cubic-bezier(.2, .7, .2, 1) both; }
  .content > .cards { animation: none; }
  .content > :nth-child(2) { animation-delay: .04s; }
  .content > :nth-child(3) { animation-delay: .08s; }
  .content > :nth-child(4) { animation-delay: .12s; }
  .content > :nth-child(n+5) { animation-delay: .16s; }
  .cards > .card { animation: entra .3s cubic-bezier(.2, .7, .2, 1) both; }
  .cards > .card:nth-child(2) { animation-delay: .05s; } .cards > .card:nth-child(3) { animation-delay: .1s; }
  .cards > .card:nth-child(4) { animation-delay: .15s; } .cards > .card:nth-child(n+5) { animation-delay: .2s; }
  .btn, .side a.nav, input, select, .chip { transition: background-color .15s, border-color .15s, color .15s, filter .15s, box-shadow .15s; }
  .btn:active { transform: translateY(1px); }
  details[open] > :not(summary) { animation: entra .2s ease both; }
  .tour { animation: entra .22s ease both; }
}
/* chamados aguardando o cliente */
.selo { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn); color: var(--warn-bg); font-size: 11px; font-weight: 700; text-align: center; line-height: 20px; }
.aguardando { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--warn); border-left-width: 5px; border-radius: var(--radius); background: var(--warn-bg); }
.aguardando.ok { border-color: var(--ok); background: var(--ok-bg); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 16px; }
.aguardando-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aguardando h2 { margin: 0 0 4px; font-size: 16px; }
.aguardando-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.aguardando-item:hover { border-color: var(--warn); text-decoration: none; }
.aguardando-item .n { font-weight: 700; color: var(--warn); }
.aguardando-item .t { flex: 1; min-width: 160px; font-weight: 600; }
.aguardando-item .ir { color: var(--brand); font-weight: 600; font-size: 13px; }
/* mesa de chamados */
.selo.erro { background: var(--err); color: var(--err-bg); }
.abas { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px; border-bottom: 1px solid var(--line); }
.abas .aba { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.abas .aba:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.abas .aba.on { color: var(--brand); background: var(--surface); border-color: var(--line); }
.card.link.ativo { border-color: var(--brand-2); box-shadow: 0 0 0 2px var(--brand-soft); }
.mesa .sla, .kanban .sla { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.mesa .sla.estourado, .kanban .sla.estourado { background: var(--err-bg); color: var(--err); }
.mesa .sla.alerta, .kanban .sla.alerta { background: var(--warn-bg); color: var(--warn); }
.mesa .sla.ok, .kanban .sla.ok { background: var(--ok-bg); color: var(--ok); }
.mesa tr.sla-estourado td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.mesa tr.sla-alerta td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.badge.info { background: var(--brand-soft); color: var(--brand); }
/* Mesa: pilulas de prioridade (texto sempre presente), alternador de vista e rodape */
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pill-erro { background: var(--err-bg); color: var(--err); } .pill-alerta { background: var(--warn-bg); color: var(--warn); }
.pill-neutra { background: var(--surface-2); color: var(--text); border-color: var(--line); } .pill-suave { background: var(--surface-2); color: var(--muted); }
/* Kanban somente leitura: quatro colunas, rolagem propria por coluna e, em tela estreita, faixa horizontal com encaixe */
/* o quadro rola dentro do proprio envoltorio em qualquer largura (a pagina nunca ganha barra horizontal): .main ja tem min-width 0 e a coluna 1fr de .app cede por causa dele */
.kanban-wrap { overflow-x: auto; max-width: 100%; min-width: 0; margin-bottom: 12px; }
.kanban-wrap:focus-visible, .kanban-lista:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.kanban-col .empty { padding: 16px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.kanban-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 0; }
.kanban-col h2 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 14px; }
.kanban-n { font-weight: 600; color: var(--muted); }
.kanban-lista { display: flex; flex-direction: column; gap: 8px; max-height: 1500px; overflow-y: auto; }
.kanban-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; padding: 10px; scroll-snap-align: start; }
.kanban-card.sla-estourado { border-left-color: var(--err); } .kanban-card.sla-alerta { border-left-color: var(--warn); } .kanban-card.sla-ok { border-left-color: var(--ok); }
.kanban-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.kanban-titulo { margin: 4px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.kanban-cliente, .kanban-sla, .kanban-resp { margin-top: 4px; }
@media (max-width: 719px) { .kanban { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; }
  .kanban-wrap { scroll-snap-type: x mandatory; }
  .kanban-col { scroll-snap-align: start; } }
.vista { display: inline-flex; gap: 0; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.vista a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; font-weight: 600; color: var(--muted); background: var(--surface); }
.vista a + a { border-left: 1px solid var(--line); } .vista a:hover { text-decoration: none; background: var(--surface-2); }
.vista a.ativo { color: var(--brand); background: var(--brand-soft); }
.card .mesa-conectar { display: flex; align-items: center; min-height: 40px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.card .mesa-conectar a { display: inline-flex; align-items: center; min-height: 36px; color: var(--brand-2); }
@media (pointer: coarse) { .card .mesa-conectar a { min-height: 44px; } }
 .mesa-rodape { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mesa-enc { margin-top: 14px; } .mesa-enc > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
/* tela do chamado */
textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; min-height: 96px; }
textarea:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.resumo { margin-bottom: 14px; }
.kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.kv { display: flex; flex-direction: column; gap: 2px; }
.kv .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kv .v { font-weight: 600; }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.linha-tempo { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.paginacao { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.entrada { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand-2); border-radius: var(--radius); padding: 12px 16px; }
.entrada.nota { border-left-color: var(--warn); background: var(--warn-bg); }
.entrada.solucao { border-left-color: var(--ok); }
.entrada header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.entrada .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.resposta h2, .panel h2 { margin-top: 0; font-size: 16px; }
.sla { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.sla.estourado { background: var(--err-bg); color: var(--err); } .sla.alerta { background: var(--warn-bg); color: var(--warn); } .sla.ok { background: var(--ok-bg); color: var(--ok); }

.form-chamado { width: 100%; }
.form-chamado .grade .field { justify-content: flex-end; }
.form-chamado .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; }
.form-chamado textarea { min-height: 160px; }
@media (max-width: 640px) { .form-chamado .toolbar .btn { width: 100%; justify-content: center; } .form-chamado { padding: 14px; } }
.form-chamado .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.form-chamado .field label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.form-chamado input:not([type=radio]):not([type=checkbox]), .form-chamado select:not([name=motivo]), .form-chamado textarea { width: 100%; }
.form-chamado input:not([type=radio]):not([type=checkbox]) { border: 1px solid var(--line); }
.form-chamado h2 { margin-top: 0; }

.opcao-notif { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.opcao-notif:last-of-type { border-bottom: 0; }
.opcao-notif input { margin-top: 4px; }
.btn[hidden] { display: none; }

/* mapa do cliente */
.grafo-area { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; margin-top: 8px; }
.grafo-tela { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; min-height: 420px; max-height: calc(100vh - 260px); box-shadow: var(--shadow); }
.grafo-lado { position: sticky; top: 12px; }
.grafo-lado h2 { margin-top: 0; font-size: 16px; overflow-wrap: anywhere; }
.det { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.det dt { color: var(--muted); } .det dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.grafo-tela svg { display: block; }
.lig { fill: none; stroke: var(--line); stroke-width: 1.6; }
.no { cursor: pointer; outline: none; }
.no rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.2; transition: stroke .15s, fill .15s; }
.no:hover rect, .no:focus-visible rect { stroke: var(--brand-2); }
.no.sel rect { stroke: var(--brand-2); stroke-width: 2.4; }
.no .tit { font: 600 13px system-ui, sans-serif; fill: var(--text); }
.no .sub { font: 11px system-ui, sans-serif; fill: var(--muted); }
.no .seta { font: 12px system-ui, sans-serif; fill: var(--muted); }
.no .cont { fill: var(--surface); stroke: var(--line); } .no .cont-t { font: 700 11px system-ui, sans-serif; fill: var(--text); }
.no.cliente rect { fill: var(--brand-soft); stroke: var(--brand-2); }
.no.ok rect { stroke: var(--ok); } .no.alerta rect { stroke: var(--warn); } .no.erro rect { stroke: var(--err); }
.no.ok.sel rect, .no.alerta.sel rect, .no.erro.sel rect { stroke-width: 2.8; }
.no.chamado.alerta rect { fill: var(--warn-bg); } .no.alerta.alerta rect { fill: var(--warn-bg); } .no.alerta.erro rect, .no.erro rect { fill: var(--err-bg); }
.no.mais rect { fill: transparent; stroke-dasharray: 4 3; }
@media (max-width: 900px) { .grafo-area { grid-template-columns: 1fr; } .grafo-lado { position: static; } }

.ativos-novo { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 0 0 14px; }
.ativos-novo legend { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 0 6px; }
.ativos-novo input[type=search] { width: 100%; margin-bottom: 8px; }
.ativos-lista { max-height: 180px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
.ativos-lista label[hidden] { display: none; }

/* versao do sistema */
.versao { margin: 0 4px 8px; padding: 0 6px; font-size: 11px; color: var(--muted); text-align: center; letter-spacing: .02em; }
.versao-login { margin-top: 14px; }

.login-nome { display: block; margin-top: 4px; font-size: 17px; letter-spacing: .02em; color: var(--text); }

/* celular: cartoes em 2 colunas, abas rolam na horizontal, ligacoes do mapa mais visiveis */
.lig { stroke: var(--muted); opacity: .5; }
@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cards .card { padding: 12px 10px; } .cards .card .v { font-size: 22px; }
  .abas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .abas .aba { white-space: nowrap; flex: none; }
}

/* ===== refinamento visual (1.6): profundidade, hierarquia e estados; so aparencia, nenhum layout muda ===== */
:root {
  --ring: rgba(47, 109, 176, .35);
  --glow: 0 0 0 1px rgba(255, 255, 255, .04) inset;
  --shadow-2: 0 2px 4px rgba(20, 35, 60, .06), 0 10px 28px rgba(20, 35, 60, .08);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ring: rgba(139, 188, 240, .4); --shadow-2: 0 8px 28px rgba(0, 0, 0, .35); } }
:root[data-theme="dark"] { --ring: rgba(139, 188, 240, .4); --shadow-2: 0 8px 28px rgba(0, 0, 0, .35); }
body { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--brand-soft); color: var(--text); }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-weight: 650; letter-spacing: -.005em; }

/* menu lateral: item ativo com barra de destaque, grupos mais claros */
.side { padding: 18px 12px 14px; }
.side a.nav { position: relative; font-weight: 500; }
.side a.nav:hover { background: var(--surface-2); transform: translateX(1px); }
.side a.nav.on { background: linear-gradient(90deg, var(--brand-soft), transparent 130%); font-weight: 650; }
.side a.nav.on::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-2); }
.side h3 { font-size: 10.5px; letter-spacing: .05em; font-weight: 700; }
.selo { box-shadow: 0 0 0 2px var(--surface); }

/* topo translucido */
.top { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }

/* cartoes: faixa de estado no topo e numeros tabulares */
.card { position: relative; overflow: hidden; box-shadow: var(--shadow), var(--glow); transition: box-shadow .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); opacity: .9; }
.card.ok::before { background: var(--ok); } .card.alerta::before { background: var(--warn); } .card.erro::before { background: var(--err); }
.card .v { font-size: 30px; font-variant-numeric: tabular-nums; }
.card .l { font-weight: 500; letter-spacing: .01em; margin-top: 2px; }
a.card.link:hover { box-shadow: var(--shadow-2); }
.panel { box-shadow: var(--shadow), var(--glow); }
.panel > h2:first-child { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }

/* botoes e campos */
.btn { box-shadow: 0 1px 1px rgba(20, 35, 60, .04); }
.btn:hover { border-color: color-mix(in srgb, var(--brand-2) 45%, var(--line)); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--btn) 88%, #fff), var(--btn)); box-shadow: 0 1px 2px rgba(20, 35, 60, .25), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn.primary:hover { filter: brightness(1.08); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
input:hover, select:hover { border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); }
input:focus, select:focus { outline: 0; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--ring); }
button:focus-visible, a:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ring); border-radius: 6px; }
.field label { letter-spacing: .07em; }

/* tabelas: cabecalho discreto, linhas mais legiveis, primeira coluna em destaque */
.table-wrap { box-shadow: var(--shadow), var(--glow); }
th { background: color-mix(in srgb, var(--surface-2) 92%, var(--brand-soft)); border-bottom: 1px solid var(--line); font-weight: 700; letter-spacing: .06em; font-size: 10.5px; }
td { font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
tbody tr td:first-child { font-weight: 550; }
tr.g-head td:first-child { font-weight: 600; }

/* selos de estado com ponto indicador (nao dependem so de cor) */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; letter-spacing: .01em; border: 1px solid transparent; }
.badge.ok, .badge.alerta, .badge.erro { border-color: color-mix(in srgb, currentColor 18%, transparent); }
.badge.ok::before, .badge.alerta::before, .badge.erro::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip { border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }

/* mensagens */
.flash, .notice { border-left-width: 4px; border-left-style: solid; border-radius: 10px; }
.flash.ok { border-left-color: var(--ok); } .flash.erro { border-left-color: var(--err); } .notice { border-left-color: var(--warn); }
.empty { border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }

/* login: fundo com brilho suave */
.center { background: radial-gradient(900px 420px at 15% -10%, var(--brand-soft), transparent 70%), radial-gradient(700px 380px at 95% 110%, var(--brand-soft), transparent 70%), var(--bg); }
.login .panel { box-shadow: var(--shadow-2); }

/* barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }

@media (prefers-reduced-motion: reduce) {
  .side a.nav:hover, .btn:active, a.card.link:hover { transform: none; }
  .card, tbody tr { transition: none; }
}
@media (max-width: 900px) { .side a.nav.on::before { display: none; } .top { position: static; } }
@media print { .top { position: static; backdrop-filter: none; } .card::before { display: none; } }

/* ===== redesenho 1.6: paleta, menu mais largo, cartoes alinhados a esquerda ===== */
:root {
  --bg: #f3f5f9; --surface: #ffffff; --surface-2: #f6f8fc; --line: #e1e7f0; --side: #ffffff;
  --brand: #1b5fa8; --brand-2: #2a76d0; --brand-soft: #e6f0fc; --btn: #1b5fa8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #171b26; --surface: #222836; --surface-2: #2a3142; --line: #323a4d; --side: #222836;
    --brand: #7cabf2; --brand-2: #7cabf2; --brand-soft: #2a3a57; --btn: #2f6ccc; }
}
:root[data-theme="dark"] { --bg: #171b26; --surface: #222836; --surface-2: #2a3142; --line: #323a4d; --side: #222836;
  --brand: #7cabf2; --brand-2: #7cabf2; --brand-soft: #2a3a57; --btn: #2f6ccc; }
.app { grid-template-columns: 250px 1fr; }
.side { background: var(--side); }
.side a.nav .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.side a.nav { padding: 8px 10px; }
.content { padding: 26px 32px 56px; }
.page-head { margin-bottom: 20px; }
.page-head > div > .muted:first-of-type { max-width: 70ch; }

/* cartoes de indicador: numero grande a esquerda, rotulo embaixo */
.card { text-align: left; padding: 18px 18px 16px; }
.card .v { font-size: 34px; font-weight: 750; letter-spacing: -.03em; }
.card .l { font-size: 12.5px; margin-top: 4px; }
.card .s { margin-top: 6px; }
.cards { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

/* aviso compacto de pendencias */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-left: 4px solid var(--warn); border-radius: 10px; background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); }
.banner-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner-txt b { color: var(--text); }

/* tabelas: cliente em uma linha so; abas mais claras */
td[data-label="Cliente"] { white-space: nowrap; overflow-wrap: normal; }
.abas { border-bottom-color: var(--line); gap: 2px; }
.abas .aba { border-radius: 10px 10px 0 0; padding: 9px 14px; transition: color .15s, background-color .15s; }
.abas .aba.on { box-shadow: inset 0 -2px 0 var(--brand-2); }
.panel > h2:first-child { font-size: 15px; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .content { padding: 16px; } .card .v { font-size: 28px; } }

/* tour guiado: alvo em destaque com o resto da tela escurecido, barra de progresso e cartao mais claro */
.tour { padding: 0 0 14px; overflow: hidden; border-color: color-mix(in srgb, var(--brand-2) 55%, var(--line)); box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--brand-2) 25%, transparent); }
.tour > :not(.tour-prog) { margin-left: 16px; margin-right: 16px; }
.tour .cont { margin-top: 14px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; color: var(--brand); }
.tour h2 { font-size: 17px; letter-spacing: -.01em; }
.tour-prog { height: 4px; background: var(--surface-2); }
.tour-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 0 4px 4px 0; transition: width .25s var(--ease); }
.tour-alvo { outline: 0; border-radius: 10px; box-shadow: 0 0 0 3px var(--brand-2), 0 0 0 9999px rgba(4, 9, 18, .58); transition: box-shadow .2s; }
@media (prefers-reduced-motion: reduce) { .tour-prog i, .tour-alvo { transition: none; } }
@media print { .tour { display: none; } }

/* Projetos: quadro de leitura (colunas = secoes) */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.quadro-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; }
.quadro-col h3 { margin: 0 0 4px; font-size: 14px; }
.quadro-card { padding: 10px 12px; box-shadow: none; overflow-wrap: anywhere; }
.quadro-card.feita .quadro-titulo { color: var(--muted); text-decoration: line-through; }
.quadro-card[draggable="true"] { cursor: grab; }
.quadro-card.arrastando { opacity: .5; }
.quadro-col.alvo { outline: 2px dashed var(--brand-2); outline-offset: -4px; }
.mover-form { display: flex; gap: 6px; margin-top: 8px; }
.mover-form select { min-width: 0; flex: 1; }

/* Meus chamados (visao da Mesa): convite para conectar a conta */
.meus-conectar { max-width: 620px; }

/* Assistente de IA no chamado */
.ia { background: var(--surface-2); border-color: var(--brand-2); margin-bottom: 14px; }
.ia h3 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); }
.ia ul { margin: 0; padding-left: 20px; }
.ia-alerta { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; padding: 12px 14px; background: var(--err-bg); color: var(--err); border: 1px solid var(--err); border-left-width: 5px; border-radius: 8px; }
.ia-alerta svg { flex: none; margin-top: 1px; }
.ia-alerta b { display: block; }
.ia-alerta span { display: block; margin-top: 2px; font-size: 13px; }
.ia-cab { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ia-selo { background: var(--brand-soft); color: var(--brand); }
.ia-selo.baixa { background: var(--warn-bg); color: var(--warn); }
.ia-rascunho { white-space: pre-wrap; word-break: break-word; user-select: all; margin: 0; padding: 10px 12px; font: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.ia-acoes { margin-top: 12px; justify-content: space-between; }
.ia-botao, .ia-acoes .btn { min-height: 36px; }
.ia-notas { min-height: 36px; }

/* menu em secoes recolhiveis (details/summary, sem JavaScript) */
.side .sec { display: block; }
.side .sec > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin: 6px 0 0; padding: 0 10px; border-radius: 8px;
  list-style: none; cursor: pointer; user-select: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.side .sec > summary::-webkit-details-marker { display: none; }
.side .sec > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; }
.side .sec[open] > summary::after { transform: rotate(45deg); }
.side .sec > summary:hover { background: var(--surface-2); color: var(--text); }
.side .sec > summary:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
.side .sec-itens { display: flex; flex-direction: column; gap: 4px; }
/* menu recolhido (so icones): sem titulos e com todos os itens visiveis, mesmo nas secoes fechadas */
@media (min-width: 901px) {
  .menu-recolhido .side .sec > summary { display: none; }
  .menu-recolhido .side .sec::details-content { content-visibility: visible; display: block; }
  .menu-recolhido .side .sec:not([open]) > .sec-itens { display: flex; }
  .menu-recolhido .side .sec { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; width: 44px; }
}
/* faixa horizontal (telas estreitas): cada secao e um bloco em linha */
@media (max-width: 900px) {
  .side .sec { display: flex; align-items: center; flex: none; gap: 4px; margin-right: 4px; padding-left: 6px; border-left: 1px solid var(--line); }
  .side .sec > summary { margin: 0; padding: 0 8px; white-space: nowrap; }
  .side .sec-itens { flex-direction: row; }
}
.btn.sm { min-height: 36px; }

/* alvos de toque de 44px em telas por toque */
@media (pointer: coarse) {
  .btn, .btn.sm, .side a.nav, .sec summary, .vista a, a.card.link, .btn-menu { min-height: 44px; }
  .btn-menu { min-width: 44px; }
}

/* celular: a Mesa vira lista de cartoes e a faixa de cartoes rola dentro da propria caixa */
@media (max-width: 720px) {
  .cards:has(+ .vista) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 62%); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .cards:has(+ .vista) > .card { scroll-snap-align: start; }
  .mesa tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; border-left: 4px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 8px; }
  .mesa tr.sla-estourado { border-left-color: var(--err); } .mesa tr.sla-alerta { border-left-color: var(--warn); } .mesa tr.sla-ok { border-left-color: var(--ok); }
  .mesa tr.sla-estourado td:first-child, .mesa tr.sla-alerta td:first-child { box-shadow: none; }
  .mesa td { width: auto; min-width: 0; text-align: left; justify-content: flex-start; align-items: baseline; gap: 8px; grid-column: 1 / -1; overflow-wrap: anywhere; white-space: normal; }
  .mesa td[data-label="Chamado"] { white-space: nowrap; grid-column: 1; grid-row: 1; font-weight: 700; font-size: 16px; }
  .mesa td[data-label="SLA"] { grid-column: 2; grid-row: 1; justify-content: flex-end; text-align: right; flex-wrap: wrap; }
  .mesa td[data-label="Título"] { grid-row: 2; font-weight: 600; }
  .mesa td[data-label="Cliente"] { grid-row: 3; }
  .mesa td[data-label="Prioridade"] { grid-row: 4; } .mesa td[data-label="Status"] { grid-row: 5; }
  .mesa td[data-label="Responsável"] { grid-row: 6; } .mesa td[data-label="Atualizado"] { grid-row: 7; }
  .mesa td[data-label="Chamado"]::before, .mesa td[data-label="SLA"]::before, .mesa td[data-label="Título"]::before { content: none; }
  .mesa td[data-label]::before { min-width: 84px; }
}

/* responsavel do chamado: Assumir / Alterar na Mesa, no Kanban e no resumo do chamado */
.resp-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-weight: 400; }
.btn.assumir { min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-size: 13px; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.btn.assumir:hover { background: var(--btn); border-color: var(--btn); color: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.btn.assumir svg { flex: none; }
@media (pointer: coarse) { .btn.assumir { min-height: 44px; padding: 0 16px 0 14px; } }
.resp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.resp-lista li { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.resp-x { min-width: 28px; padding: 0 8px; color: var(--err); }
@media (pointer: coarse) { .resp-x { min-width: 44px; } }
.resp-alterar { display: inline-flex; gap: 6px; align-items: center; }
.resp-alterar select { min-height: 36px; }
@media (pointer: coarse) { .resp-alterar select { min-height: 44px; } }
.mesa-rodape a.ativo { font-weight: 700; color: var(--text); text-decoration: underline; }
/* Responder selecionados (Mesa) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
table.mesa th.sel, table.mesa td.sel { width: 32px; text-align: center; }
td.sel input, .kanban-topo input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.lote-barra { margin: 4px 0 10px; gap: 10px; align-items: center; }
.lote-lista { margin: 0; padding-left: 18px; } .lote-lista li { margin: 4px 0; }
.lote-texto { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; }
.anexos-lista { list-style: none; margin: 0; padding: 0; } .anexos-lista li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); }

/* painel de vulnerabilidades */
.vuln-fabs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 14px; }
.vuln-fab, .field .vuln-fab { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); cursor: pointer; }
.vuln-refs { margin: 8px 0 0; padding-left: 18px; } .vuln-refs li { margin: 6px 0; word-break: break-all; }
/* blocos das telas de vulnerabilidades: cabecalho em faixa + corpo */
.vuln-page { margin-bottom: 20px; align-items: center; } .vuln-page h1 { margin: 0 0 2px; }
.vuln-sub { color: var(--brand); font-size: 13px; font-weight: 500; } .vuln-sub.falhou { color: var(--warn); }
.vcard { background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.vcard-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 15px; }
details.vcard:not([open]) > .vcard-h { border-bottom: 0; } summary.vcard-h { cursor: pointer; }
.vcard-b { padding: 16px 18px; } .vcard-b > :first-child { margin-top: 0; } .vcard-b > :last-child { margin-bottom: 0; }
.vcard-b h3 { font-size: 14px; margin: 16px 0 4px; }
.vcard > .table-wrap { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.vstat .l { order: -1; }
.vuln-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 30px; margin-bottom: 18px; }
.vuln-hero h2 { color: var(--brand); margin: 0 0 8px; font-size: 20px; } .vuln-hero p { margin: 0; max-width: 56ch; color: var(--muted); }
.vuln-hero svg { flex: none; width: 190px; height: auto; }
.vuln-hero .h-a { fill: var(--surface-2); stroke: var(--line); } .vuln-hero .h-b { fill: var(--brand); } .vuln-hero .h-c { fill: var(--line); }
.vuln-hero .h-d { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 2.5; } .vuln-hero .h-e { fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .vuln-hero svg { display: none; } .vuln-hero { padding: 20px; } }
.vuln-fab input[type="checkbox"], .filters .field .vuln-fab input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; max-width: 16px; padding: 0; flex: none; }
.field .vuln-fab { white-space: nowrap; min-height: 34px; }
.vuln-filtros .field:last-child, .vuln-filtros .field:nth-last-child(2) { min-width: 0; }
.vuln-leg { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 28px; margin: 12px 0 0; }
.vuln-leg dt { font-weight: 600; margin-bottom: 2px; } .vuln-leg dd { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* base visual do portal: superficies claras sem borda, sombra leve e bastante respiro.
   A cor do cartao e um sinal (faixa, icone e numero): azul neutro, verde em dia, amarelo atencao, vermelho problema. O tema escuro mantem as proprias cores (seletores mais fortes). */
:root { --bg: #f5f6fa; --surface: #ffffff; --surface-2: #f7f8fb; --line: #e8eaf0; --text: #2f3b4a; --muted: #5f6b7a; --brand: #1f5fbf; --brand-2: #1f5fbf; --brand-soft: #e6effc; --btn: #1f5fbf; --radius: 10px;
  --ok: #14774c; --ok-bg: #e0f5ea; --warn: #946000; --warn-bg: #fff1d6; --err: #c5362b; --err-bg: #fdeae8; --shadow: 0 2px 6px rgba(47, 59, 74, .08); --trilho: #c9cfdb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --trilho: #465069; } }
:root[data-theme="dark"] { --trilho: #465069; }
h1 { font-size: 24px; font-weight: 600; }
.side { background: var(--surface); border-right: 0; box-shadow: var(--shadow); }
.panel { border: 0; box-shadow: var(--shadow); padding: 22px; }
.panel > h2:first-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; font-size: 17px; font-weight: 500; }
.cards { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cards > .card, .cards > a.card.link { --sinal: var(--brand); --sinal-bg: var(--brand-soft); display: flex; flex-direction: column; background: var(--surface); border: 0; border-top: 3px solid var(--sinal); padding: 18px 20px 20px; color: var(--text); text-align: left; box-shadow: var(--shadow); }
.cards > .card.ok, .cards > a.card.link.ok { --sinal: var(--ok); --sinal-bg: var(--ok-bg); } .cards > .card.alerta, .cards > a.card.link.alerta, .cards > .card.vstat-kev { --sinal: var(--warn); --sinal-bg: var(--warn-bg); } .cards > .card.erro, .cards > a.card.link.erro, .cards > .card.vstat-criticas { --sinal: var(--err); --sinal-bg: var(--err-bg); }
.cards > .card::before, .cards > .card::after { display: none; }
.cards > .card > svg { order: -2; flex: none; box-sizing: border-box; width: 40px; height: 40px; padding: 10px; margin-bottom: 14px; border-radius: 8px; background: var(--sinal-bg); fill: none; stroke: var(--sinal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cards > .card .l { order: -1; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.3; margin: 0 0 6px; }
.cards > .card .v, .cards > .card.ok .v, .cards > .card.alerta .v, .cards > .card.erro .v { color: var(--sinal); font-size: 28px; font-weight: 600; line-height: 1.2; }
.cards > .card .s { color: var(--muted); font-size: 13px; margin-top: 6px; }
.cards > a.card.link:hover { text-decoration: none; border-color: var(--sinal); box-shadow: var(--shadow-2); } .cards > a.card.link.ativo, .cards > a.card.link.on { border-color: var(--sinal); box-shadow: var(--shadow); outline: 2px solid var(--sinal); outline-offset: 2px; }

/* Integracao GLPI: conexao em faixa, abas (radio, sem JavaScript) e permissoes com interruptor */
.gl-con { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.gl-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); } .gl-ic.erro { background: var(--err-bg); color: var(--err); }
.gl-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gl-t { flex: 1; min-width: 0; } .gl-t b { display: block; font-size: 15px; font-weight: 500; } .gl-res { flex-basis: 100%; margin: 0; }
.gl-abas { display: flex; flex-wrap: wrap; gap: 6px; } .gl-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gl-abas > label { padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; } .gl-abas > label:hover { color: var(--text); }
.gl-radio:checked + label { background: var(--btn); color: #fff; } .gl-radio:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.gl-pane { display: none; order: 1; flex-basis: 100%; min-width: 0; margin-top: 10px; }
#gl-a-permissoes:checked ~ .gl-p-permissoes, #gl-a-usuarios:checked ~ .gl-p-usuarios, #gl-a-equipe:checked ~ .gl-p-equipe { display: block; }
.gl-g { font-size: 12px; font-weight: 600; color: var(--muted); margin: 18px 0 2px; } .gl-g:first-child { margin-top: 0; }
.gl-linha { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .gl-linha:last-child, .gl-linha:has(+ .gl-g) { border-bottom: 0; }
.gl-mais { font-size: 13px; color: var(--muted); margin-top: 4px; } .gl-mais summary { cursor: pointer; color: var(--brand); } .gl-mais p { margin: 6px 0 0; max-width: 720px; line-height: 1.5; }
.gl-estado { width: 68px; flex: none; margin-top: 3px; text-align: right; font-size: 13px; color: var(--muted); } .gl-estado.on { color: var(--ok); font-weight: 500; }
.gl-sw { position: relative; display: block; flex: none; width: 40px; height: 22px; min-height: 0; margin-top: 2px; padding: 0; border: 0; border-radius: 11px; background: var(--trilho); cursor: pointer; box-shadow: none; }
.gl-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.gl-sw.on { background: var(--ok); } .gl-sw.on::after { left: 20px; } .gl-sw:hover { filter: brightness(1.08); } .gl-sw:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .gl-sw[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) { .gl-estado { display: none; } }

/* graficos da Visao geral: cores de serie validadas (dataviz) nos dois temas; o texto nunca usa a cor da serie */
:root { --g-a-cor: #0052cc; --g-b-cor: #0f9485; --g-grade: #e3e6f0; --g-alta-cor: #d9640f; --g-media-cor: #d39e00; --g-baixa-cor: #5b8def; --g-neutra-cor: #8b95a7; --g-ok-cor: #0a7f66; --g-crit-cor: #d63e24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-a-cor: #4a90e2; --g-b-cor: #26a58b; --g-grade: #223149; --g-alta-cor: #ef8138; --g-media-cor: #e3b23c; --g-baixa-cor: #7aa5f5; --g-neutra-cor: #7a869a; --g-ok-cor: #2fae8e; --g-crit-cor: #f0604a; } }
:root[data-theme="dark"] { --g-a-cor: #4a90e2; --g-b-cor: #26a58b; --g-grade: #223149; --g-alta-cor: #ef8138; --g-media-cor: #e3b23c; --g-baixa-cor: #7aa5f5; --g-neutra-cor: #7a869a; --g-ok-cor: #2fae8e; --g-crit-cor: #f0604a; }
.g-a { fill: var(--g-a-cor); background: var(--g-a-cor); } .g-b { fill: var(--g-b-cor); background: var(--g-b-cor); } .g-ok { background: var(--g-ok-cor); } .g-crit { background: var(--g-crit-cor); }
.g-alta { background: var(--g-alta-cor); } .g-media { background: var(--g-media-cor); } .g-baixa { background: var(--g-baixa-cor); } .g-neutra { background: var(--g-neutra-cor); }
.g-grade-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; margin-bottom: 18px; } .g-bloco { margin: 0; min-width: 0; }
@media (max-width: 560px) { .g-grade-blocos { grid-template-columns: 1fr; } }
.g-frase { color: var(--muted); font-size: 14px; font-weight: 400; margin: 0 0 12px !important; }
.g-svg { display: block; width: 100%; height: auto; } .g-tx { font-size: 11px; fill: var(--muted); } .g-grade { stroke: var(--g-grade); stroke-width: 1; }
.g-alvo { fill: transparent; } .g-barra:hover .g-alvo { fill: var(--surface-2); } .g-barra:hover path { filter: brightness(1.12); }
.g-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin: 8px 0; } .g-leg a { color: var(--muted); }
.g-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.g-tab { margin-top: 6px; font-size: 13px; } .g-tab summary { cursor: pointer; color: var(--muted); }
.g-lista { display: flex; flex-direction: column; gap: 4px; }
.g-linha { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 4px; color: var(--text); font-size: 13px; }
a.g-linha:hover { background: var(--surface-2); text-decoration: none; } .g-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-trilho { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; } .g-trilho i { display: block; height: 100%; border-radius: 5px; }
.g-partes { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; } .g-partes i { display: block; flex-basis: 0; min-width: 3px; }
/* bloco recolhivel: a seta mostra que abre no clique */
summary.vcard-h { list-style: none; justify-content: flex-start; user-select: none; } summary.vcard-h::-webkit-details-marker { display: none; }
summary.vcard-h::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
details[open] > summary.vcard-h::before { transform: rotate(45deg); }
summary.vcard-h:hover { background: var(--surface-2); } summary.vcard-h > .muted { margin-left: auto; }
.vuln-vinc td { padding-top: 0; } .vuln-vinc summary { cursor: pointer; font-size: 13px; padding: 2px 0 6px; } .vuln-vinc form { padding: 4px 0 8px; } .vuln-vinc .vuln-fabs { margin: 6px 0 10px; }
button[disabled] { cursor: progress; }
.vuln-linhas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .vuln-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vuln-linha > .vuln-fab { min-width: 160px; } .vuln-prods { flex: 1; min-width: 240px; font-size: 13px; } .vuln-prods summary { cursor: pointer; color: var(--muted); } .vuln-prods[open] { padding-bottom: 6px; } .vuln-prods .vuln-fabs { margin: 8px 0; gap: 6px 16px; } .vuln-prods .vuln-fab { font-size: 13px; }