/* WeSalt Monitor — estilo "framed sheet" (tasteskill, seed 120135120).
   A moldura em L (menu + barra de cima) é um cinza tingido do azul da marca (#001e32); o trabalho fica numa
   folha branca afastada 8px da direita e de baixo, com borda de 1px, cantos de 16px e nenhuma sombra.
   Cor só nos dados: verde/âmbar/vermelho de status e o azul-petróleo do tempo de resposta. */
:root {
  --brand: #001e32;
  --ground: #eef2f5;          /* a moldura: um passo de baixa saturação do azul da marca */
  --surface: #ffffff;
  --raised: #f4f6f8;
  --active: #e2e8ed;
  --border: #e3e7ea;
  --rule: #eef0f2;
  --control: #cdced1;
  --text: #131416;
  --muted: #5d5f60;
  --faint: #66696b;
  --accent: #1b6c80;
  --primary: #131416; --primary-ink: #ffffff;
  --positive: #1e7b4f; --negative: #c4242a; --warning: #92400e;
  --ok: #2e9a5e; --down: #d63a3f; --warn: #d9a21b; --off: #c3cad0; --none: #e8ecef;
  --chart-1: #1b6c80; --chart-2: #2f70bb; --chart-3: #a86f0c; --chart-muted: #c3cad0;
  --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --pill-negative-bg: #ffedea; --pill-negative-ink: #831c1e;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e;
  --pill-neutral-bg: #ebedee; --pill-neutral-ink: #353736;
  --grid: #eef0f2;

  --font: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-title: 22px; --fs-section: 16px; --fs-kpi: 28px; --fs-body: 14px; --fs-small: 12px;
  --sidebar-width: 228px;
  --gap: 24px; --pad: 24px; --card-pad: 20px;
  --radius-card: 8px; --radius-control: 6px; --radius-sheet: 16px; --sheet-inset: 8px;
  --control-height: 32px; --row-height: 48px;
}
body { background: var(--ground); }

/* ---------- a moldura em L e a folha ---------- */
.app { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr); min-height: 100svh; }
.sidebar { grid-row: 1 / -1; height: 100svh; padding: 12px 12px 16px; gap: 2px; }
.topbar { grid-column: 2; display: flex; align-items: center; gap: 12px; padding: 0 calc(var(--sheet-inset) + 16px) 0 0; }
.sheet { grid-column: 2; margin: 0 var(--sheet-inset) var(--sheet-inset) 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sheet); min-width: 0; }
.canvas { padding: 24px 32px 40px; }

/* marca e escopo */
.brand { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; color: var(--brand); }
.brand svg { height: 18px; width: auto; }
.brand b { font-weight: 600; font-size: 15px; color: var(--text); }
.scope { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.scope span { display: block; font-size: var(--fs-small); color: var(--muted); }
.scope strong { font-weight: 500; }
.scope svg { width: 14px; height: 14px; color: var(--muted); }
.nav-item { justify-content: flex-start; }
.nav-item .count { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--negative); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.nav-item .count.neutral { background: var(--active); color: var(--text); }
.user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #dbe7ef; color: var(--brand); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.user span { display: block; font-size: var(--fs-small); color: var(--muted); }

/* barra de cima: busca centrada na janela, frescor e a ação principal */
.search { position: relative; width: min(548px, 46vw); margin: 0 auto; }
.search input { width: 100%; height: 32px; padding: 0 64px 0 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.search input::placeholder { color: var(--faint); }
.search svg { position: absolute; left: 11px; top: 9px; width: 14px; height: 14px; color: var(--muted); }
.search kbd { position: absolute; right: 8px; top: 6px; padding: 0 6px; height: 20px; border-radius: 4px; background: var(--raised); color: var(--muted); font: 12px/20px var(--font); }
.fresh { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.fresh i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* ---------- título ---------- */
.crumbs { display: flex; gap: 6px; color: var(--muted); margin-bottom: 8px; }
.crumbs a:hover { color: var(--text); }
.title-row { margin-bottom: 24px; align-items: flex-start; }
.title-row .sub { max-width: 112ch; font-size: 15px; line-height: 22px; text-wrap: pretty; }
.title-row > div:first-child { min-width: 0; flex: 1; }
.sub-agente { display: flex; align-items: baseline; gap: 8px; max-width: 112ch; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 21px; }
.sub-agente svg { width: 14px; height: 14px; flex: none; align-self: center; color: var(--accent); }
.sub-agente span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-agente b { color: var(--text); font-weight: 500; }
.sub-agente .card-link { flex: none; }
@media (max-width: 860px) { .sub-agente span { white-space: normal; } }
.title-row .sub b { color: var(--text); font-weight: 600; }
.actions { display: flex; gap: 8px; flex: none; }
.btn svg { width: 14px; height: 14px; }

/* ---------- a barra de proporção de status (referência: Workflow Monitor, Dribbble) ---------- */
.mix { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; }
.mix span { display: block; min-width: 4px; }
.mix .ok { background: var(--ok); } .mix .atencao { background: var(--warn); } .mix .fora { background: var(--down); } .mix .suspenso { background: var(--off); }
.mix-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.mix-legend a { display: block; padding: 2px 16px 2px 0; border-radius: 6px; }
.mix-legend a + a { padding-left: 16px; border-left: 1px solid var(--border); }
.mix-legend .label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.mix-legend .value { margin-top: 2px; font-size: var(--fs-kpi); line-height: 1.15; font-weight: 400; font-variant-numeric: tabular-nums; }
.mix-legend a:hover .value { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); }
.dot.atencao { background: var(--warn); } .dot.fora { background: var(--down); } .dot.suspenso { background: var(--off); }

/* ---------- a fita de checagens: 96 casas de 15 min = 24 h ---------- */
.fita { display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); gap: 1px; height: 22px; }
.fita i { display: block; border-radius: 1px; background: var(--none); }
.fita i.ok { background: var(--ok); } .fita i.fora { background: var(--down); } .fita i.suspenso { background: var(--off); }
.fita.mini { height: 16px; width: 192px; gap: 0; column-gap: 0; }
.fita.mini i { border-radius: 0; }
.fita-eixo { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.fita-legenda { display: flex; gap: 14px; color: var(--muted); font-size: var(--fs-small); }
.fita-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fita-legenda i { width: 10px; height: 10px; border-radius: 2px; background: var(--none); }
.fita-legenda i.ok { background: var(--ok); } .fita-legenda i.fora { background: var(--down); }

/* ---------- fora do ar agora: a resposta da pergunta da tela ---------- */
.down-list { display: grid; }
.down { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.9fr) 110px 64px; gap: 20px; align-items: start; padding: 16px 0; }
.down + .down { border-top: 1px solid var(--rule); }
.down .who { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.down .who .dot { transform: translateY(-1px); }
.down .who a { font-weight: 500; }
.down .who a:hover { text-decoration: underline; text-underline-offset: 3px; }
.down .sub, .site-cell .sub { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.down .why b { font-weight: 500; }
.down .agent { display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--raised); font-size: 13px; line-height: 18px; color: var(--text); }
.down .agent svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent); }
.down .agent.quiet { color: var(--muted); }
.down .agent.quiet svg { color: var(--muted); }
.down .tempo { text-align: right; font-variant-numeric: tabular-nums; }
.down .tempo b { display: block; color: var(--negative); font-size: 18px; font-weight: 500; }
.down .tempo span { color: var(--muted); font-size: var(--fs-small); }
.down .act { display: flex; justify-content: flex-end; }

/* ---------- parede de sites ---------- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, 14px); gap: 5px; }
.wall a { width: 14px; height: 14px; border-radius: 3px; background: var(--ok); transition: transform 120ms ease; }
.wall a.atencao { background: var(--warn); } .wall a.fora { background: var(--down); } .wall a.suspenso { background: var(--off); }
.wall a:hover, .wall a:focus-visible { transform: scale(1.35); }

.stack { display: grid; gap: var(--gap); align-content: start; }
.quedas { display: grid; }
.q, .q-eixo { display: grid; grid-template-columns: 240px minmax(0, 1fr) 132px; gap: 24px; align-items: center; }
.q { padding: 12px 0; }
.q + .q { border-top: 1px solid var(--rule); }
.q a { font-weight: 500; }
.q .sub { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.q .end { text-align: right; font-variant-numeric: tabular-nums; font-size: 16px; }
.q-eixo .fita-eixo { margin-top: 4px; }

/* listas pequenas */
.row .grow { flex: 1; min-width: 0; }
.row .grow a { font-weight: 500; }
.row .end { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.warn-text { color: var(--warning); } .neg-text { color: var(--negative); } .pos-text { color: var(--positive); }

/* ---------- agente ---------- */
.agent-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.agent-mark { width: 32px; height: 32px; border-radius: 8px; background: #e3eff2; color: var(--accent); display: grid; place-items: center; grid-row: span 2; }
.agent-mark svg { width: 16px; height: 16px; }
.steps { display: grid; gap: 0; margin-top: 16px; counter-reset: passo; }
.steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.steps li::before { counter-increment: passo; content: counter(passo); width: 20px; height: 20px; border-radius: 50%; background: var(--raised); color: var(--muted); font-size: 12px; line-height: 20px; text-align: center; }
.steps li.done::before { content: ""; background: var(--ok); -webkit-mask: none; }
.steps li .sub { display: block; color: var(--muted); font-size: var(--fs-small); }

/* tabela de sites */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.toolbar .search-inline { position: relative; }
.toolbar .search-inline input { width: 300px; height: 32px; padding: 0 12px 0 32px; border: 1px solid var(--control); border-radius: var(--radius-control); }
.toolbar .search-inline svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; color: var(--muted); }
.toolbar select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); }
.toolbar .spacer { flex: 1; }
.toolbar .count { color: var(--muted); }
.tabs a .n { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tabs a[aria-selected="true"] .n { color: var(--text); }
td.site-cell a { font-weight: 500; }
td.site-cell a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mono { font-family: var(--mono); font-size: 13px; }

/* detalhe */
.spec { display: grid; grid-template-columns: 130px minmax(0, 1fr); }
.spec dt, .spec dd { padding: 10px 0; border-top: 1px solid var(--rule); }
.spec dt:first-of-type, .spec dt:first-of-type + dd { border-top: 0; }
.spec dt { color: var(--muted); }
.evidence { padding: 12px 14px; border-radius: 8px; background: var(--raised); }
.evidence p + p { margin-top: 6px; }
.evidence code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.big-down { font-size: var(--fs-kpi); line-height: 1.15; color: var(--negative); font-weight: 500; font-variant-numeric: tabular-nums; }
.diag h3 { font-size: 18px; line-height: 1.35; font-weight: 600; }
.diag .meta-line { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); }
.diag p.exp { margin-top: 12px; max-width: 76ch; line-height: 22px; }
.diag ol.passos { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 6px; max-width: 76ch; }
details.olhou { margin-top: 16px; }
details.olhou summary { cursor: pointer; color: var(--muted); }
details.olhou ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; }
details.olhou li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 13px; }
details.olhou li code { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.bar { height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--text); border-radius: 999px; }
.bar-ends { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* ---------- celular: a moldura some, a folha vira a tela ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr); }
  .topbar { grid-column: 1; padding: 0 16px; }
  .topbar .search, .topbar .fresh { display: none; }
  .topbar .title-mobile { flex: 1; font-weight: 600; }
  .sheet { grid-column: 1; margin: 0; border: 0; border-radius: 0; }
  .canvas { padding: 16px; }
  .sidebar { background: var(--ground); height: 100%; }
  .down { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .down .why { grid-column: 1 / -1; grid-row: 2; }
  .down .act { display: none; }
  .mix-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .mix-legend a:nth-child(3) { padding-left: 0; border-left: 0; }
  .q, .q-eixo { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .q .fita { grid-column: 1 / -1; grid-row: 2; }
  .q-eixo span:first-child, .q-eixo span:last-child { display: none; }
  .q-eixo .fita-eixo { grid-column: 1 / -1; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search-inline, .toolbar .search-inline input { width: 100%; }
  .actions .btn:not(.primary) { display: none; }
  .tabs { overflow-x: auto; white-space: nowrap; }
}
@media (min-width: 861px) { .topbar .menu-toggle, .topbar .title-mobile { display: none; } }
.spec dd { min-width: 0; overflow-wrap: anywhere; }
.diag ol.passos { list-style: decimal; padding-left: 20px; }
@media (max-width: 860px) {
  details.olhou li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  details.olhou li span { overflow-wrap: anywhere; }
  .spec { grid-template-columns: 110px minmax(0, 1fr); }
}

.m-label { display: none; }
@media (max-width: 640px) {
  /* a tabela vira lista de linhas: site e situação em cima, os números embaixo, a fita na largura toda */
  table thead { display: none; }
  table, tbody { display: block; }
  tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  tbody td { display: block; padding: 0; border: 0; text-align: left !important; }
  td.c-sit { text-align: right !important; }
  td.c-sit .sub { display: none !important; }
  td.c-resp, td.c-up, td.c-ssl { display: inline; font-size: 13px; color: var(--muted); }
  td.c-resp { grid-column: 1 / -1; display: flex; gap: 14px; }
  td.c-up, td.c-ssl { display: none; }
  td.c-fita { grid-column: 1 / -1; }
  td.c-fita .fita.mini { width: 100%; }
  .m-label { display: inline; color: var(--muted); }
  .toolbar select { flex: 1; min-width: 0; }
  .panel > header { flex-wrap: wrap; }
  .panel > header .fita-legenda { flex-basis: 100%; flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 640px) {
  .toolbar .spacer { display: none; }
  .toolbar .count { flex-basis: 100%; }
}

.panel.col { display: flex; flex-direction: column; }
.voltaram { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13px; line-height: 20px; }
.voltaram b { color: var(--positive); font-weight: 500; }
.voltaram span { color: var(--faint); }


/* ======== peças das outras telas (regras, revisar, login, formulários), herdadas da v1 ======== */
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.row .grow > span { display: block; color: var(--muted); font-size: var(--fs-small); }
.row .end span { display: block; color: var(--muted); font-size: var(--fs-small); }
.more { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; border-top: 1px solid var(--rule); color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts > div { padding: 2px 16px; }
.facts > div:first-child { padding-left: 0; }
.facts > div + div { border-left: 1px solid var(--border); }
.facts dt { color: var(--muted); }
.facts dd { margin-top: 4px; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.facts dd small { font-size: 12px; color: var(--muted); font-weight: 400; }
.incident-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.incident-head .big { font-size: var(--fs-kpi); line-height: 1.1; font-weight: 500; color: var(--negative); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 4px; background: var(--raised); font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
/* ---------- configurações ---------- */
.setting { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding: 32px 0; }
.setting + .setting { border-top: 1px solid var(--border); }
.setting:first-of-type { padding-top: 8px; }
.setting > div:first-child h2 { font-size: 16px; font-weight: 600; }
.setting > div:first-child p { margin-top: 6px; color: var(--muted); }
.setting .panel { display: grid; gap: 16px; }
.switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
.switch-row b { font-weight: 500; }
.switch-row span { color: var(--muted); grid-column: 1; }
.switch-row .switch { grid-row: 1 / span 2; grid-column: 2; }
.inline-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.panel-foot { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.panel-foot .stamp { margin-right: auto; }
.connected { display: inline-flex; align-items: center; gap: 6px; color: var(--positive); font-weight: 500; }
.preview { display: grid; gap: 10px; }
.preview .label { color: var(--muted); font-size: var(--fs-small); }
.wa { max-width: 380px; padding: 12px 14px; border-radius: 8px; background: #e7f6e9; color: #0d1f12; line-height: 20px; }
.wa .t { display: block; margin-top: 6px; text-align: right; color: #4c6352; font-size: 11px; }

/* ---------- a revisar ---------- */
.review td .sub { max-width: none; }
.review select.input { height: 34px; min-width: 190px; }

/* ---------- login ---------- */

.detect { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.detect div + div { padding-left: 16px; border-left: 1px solid var(--border); }
.detect span { color: var(--muted); }
.detect b { display: block; margin-top: 4px; font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; }
.checks .gap td { color: var(--muted); font-size: 13px; }
.flash { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius-control); background: var(--raised); }
.form-error { padding: 10px 14px; border-radius: var(--radius-control); background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.linklike { border: 0; background: none; padding: 0; color: var(--muted); font-size: var(--fs-small); cursor: pointer; }
.linklike:hover { color: var(--text); }
.user form { margin-left: auto; }
.title-actions, .actions { display: flex; align-items: center; gap: 8px; flex: none; }
.title-actions form, .actions form, .topbar form { display: inline-flex; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.sidebar .close { display: none; align-self: flex-end; }
.disco-barra { flex: none; width: 160px; height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.disco-barra i { display: block; height: 100%; background: #9aa0a6; }
.disco-barra i.a { background: var(--warn); }
.disco-barra i.f { background: var(--down); }
.uptime-low { color: var(--negative); }
.wa-off { color: var(--muted); }
@media (max-width: 860px) {
  .sidebar .close { display: inline-flex; }
  .setting { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .inline-fields { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .disco-barra { width: 64px; }
  .row .end { white-space: normal; max-width: 45%; }
  .title-actions, .actions { flex-wrap: wrap; }
}

@media (min-width: 641px) { td.n { white-space: nowrap; } }

/* ---------- login: a moldura tingida, o lado da marca e o formulário num cartão ---------- */
.login { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: var(--ground); }
.login .side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 40px 48px; border-radius: var(--radius-sheet); background: var(--brand); color: #fff; }
.login .side-brand { display: flex; align-items: center; gap: 12px; }
.login .side-brand svg { width: 64px; height: auto; color: #fff; }
.login .side-brand b { font-size: 17px; font-weight: 500; color: #c9d6df; }
.login .side-main h2 { max-width: 22ch; font-size: 36px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.login .side-main p { margin-top: 16px; max-width: 46ch; color: #c9d6df; font-size: 16px; line-height: 25px; }
.login .side-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.login .side-facts div { padding-right: 16px; }
.login .side-facts div + div { padding-left: 16px; border-left: 1px solid #1f3d52; }
.login .side-facts dt { font-size: 24px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.login .side-facts dd { margin-top: 4px; color: #a9bac6; font-size: 13px; line-height: 18px; }
.login .side-fita .fita { height: 28px; }
.login .side-fita .fita i { background: #1f3d52; }
.login .side-fita .fita i.ok { background: #2e9a5e; }
.login .side-fita .fita i.fora { background: #e0484d; }
.login .side-fita figcaption { margin-top: 10px; color: #a9bac6; font-size: 12px; }
.login .form { display: grid; place-items: center; padding: 32px 16px; }
.login-card { width: 100%; max-width: 400px; display: grid; gap: 18px; padding: 36px; border: 1px solid var(--border); border-radius: var(--radius-sheet); background: var(--surface); }
.login-card img { width: 40px; height: 40px; }
.login-card h1 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.login-card h1 + p { margin-top: 4px; color: var(--muted); }
.login-card .input { height: 40px; }
.login-card .btn.primary { height: 40px; width: 100%; }
.login-foot { color: var(--faint); font-size: 12px; text-align: center; }
@media (max-width: 960px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login .side { padding: 24px; gap: 24px; }
  .login .side-main h2 { font-size: 24px; max-width: none; }
  .login .side-facts, .login .side-fita { display: none; }
  .login .form { padding: 8px 0 24px; }
  .login-card { padding: 24px; }
}

/* ---------- conta no pé do menu: a linha inteira é o botão; o menu abre para cima ---------- */
.conta-wrap { position: relative; }
.conta { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; transition: background-color 150ms ease; }
.conta:hover, .conta[aria-expanded="true"] { background: var(--active); }
.conta .avatar { width: 32px; height: 32px; font-size: 12px; }
.conta-nome { flex: 1; min-width: 0; line-height: 18px; }
.conta-nome b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-nome span { display: block; color: var(--muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta > svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.conta-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 30, 50, 0.12); }
.conta-menu[hidden] { display: none; }
.conta-menu-head { display: grid; gap: 2px; padding: 8px 10px 10px; }
.conta-menu-head b { font-weight: 600; }
.conta-menu-head span:not(.pill) { color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.conta-menu-head .pill { justify-self: start; margin-top: 6px; }
.conta-menu form { display: block; }
.conta-menu a, .conta-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.conta-menu a:hover, .conta-menu button:hover, .conta-menu a:focus-visible, .conta-menu button:focus-visible { background: var(--raised); outline: none; }
.conta-menu svg { width: 16px; height: 16px; color: var(--muted); }
.conta-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--rule); }
.conta-menu .sair { color: var(--negative); }
.conta-menu .sair svg { color: var(--negative); }

/* ---------- tema escuro ----------
   Segue o navegador; o botão da barra de cima guarda a escolha (views/_tema.php põe data-theme no <html>).
   A moldura é o azul da marca quase preto e a folha um passo mais clara; elevação por luminosidade, sem sombra.
   Verde/âmbar/vermelho de status sobem de luminosidade para manter o contraste no fundo escuro. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0a1117;
  --surface: #111a21;
  --raised: #18232c;
  --active: #1f2c36;
  --border: #233039;
  --rule: #1b262e;
  --control: #3b4a55;
  --text: #e7ecf0;
  --muted: #a5b1ba;
  --faint: #8d99a3;
  --accent: #58b6cb;
  --primary: #e7ecf0; --primary-ink: #0a1117;
  --positive: #4cc685; --negative: #f06a70; --warning: #e8b04a;
  --ok: #3cb571; --down: #e5575c; --warn: #deaa2c; --off: #4e5b65; --none: #24313a;
  --chart-1: #58b6cb; --chart-2: #6ea3e8; --chart-3: #d49c3c; --chart-muted: #4e5b65;
  --chart-mark: var(--text); --chart-span: 0.14;
  --pill-positive-bg: #14301f; --pill-positive-ink: #6fd69e;
  --pill-negative-bg: #3a1a1f; --pill-negative-ink: #ff9196;
  --pill-warning-bg: #33280f; --pill-warning-ink: #f0c060;
  --pill-neutral-bg: #222e37; --pill-neutral-ink: #d3dbe1;
  --grid: #1f2b34; --axis-ink: var(--muted); --ink: var(--text);
}
:root[data-theme="dark"] .brand { color: var(--text); }
:root[data-theme="dark"] .avatar { background: #1d3a4e; color: #d3e3ee; }
:root[data-theme="dark"] .agent-mark { background: #15313a; }
:root[data-theme="dark"] .wa { background: #15301d; color: #d9efdf; }
:root[data-theme="dark"] .wa .t { color: #8fb39a; }
:root[data-theme="dark"] .disco-barra i { background: #6b7680; }
:root[data-theme="dark"] .conta-menu { background: var(--raised); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .login .side { border: 1px solid var(--border); }
:root[data-theme="dark"] .switch::after { background: var(--ground); }
:root[data-theme="dark"] .switch:not(:checked)::after { background: var(--muted); }

/* o botão de tema mostra a lua no claro e o sol no escuro (o tema para onde ele leva) */
.topbar .tema { width: var(--control-height); padding: 0; color: var(--muted); flex: none; }
.topbar .tema:hover { color: var(--text); }
.topbar .tema svg { width: 16px; height: 16px; }
.topbar .tema svg + svg, :root[data-theme="dark"] .topbar .tema svg:first-child { display: none; }
:root[data-theme="dark"] .topbar .tema svg + svg { display: block; }