/* =========================================================================
   Painel do site — visual v2.2.0 (2026-10-06)
   Tinta azul-noite, papel claro e um único tom de destaque (configurável em
   Aparência). Tudo com variáveis, para o tema escuro trocar só as cores.
   As classes antigas (.admin-card, .btn-a, .table-a, .badge-a, .alert-a,
   .form-*) continuam valendo em todas as telas.
   ========================================================================= */
:root {
  --a-acc: #e8a33d;              /* destaque — trocado em Aparência */
  --a-tinta: #0f1730;
  --a-tinta-2: #18213f;
  --a-bg: #f5f6f8;
  --a-card: #ffffff;
  --a-card-2: #fafbfc;
  --a-border: #e6e8ee;
  --a-border-2: #d7dbe4;
  --a-text: #1a2033;
  --a-muted: #687089;
  --a-faint: #9aa1b4;
  --a-ok: #138a5e; --a-ok-bg: #e5f6ee;
  --a-warn: #a15c00; --a-warn-bg: #fdf1dc;
  --a-err: #b42318; --a-err-bg: #fdeceb;
  --a-info: #2f5bd3; --a-info-bg: #e9effd;
  --a-radius: 12px;
  --a-shadow: 0 1px 2px rgba(16,24,40,.05);
  --a-shadow-2: 0 12px 32px -12px rgba(16,24,40,.22);
  --a-navy: var(--a-tinta);      /* nome antigo, usado em estilos inline de algumas telas */
  --a-gold: var(--a-acc);
  --a-acc-fraco: color-mix(in srgb, var(--a-acc) 14%, transparent);
  --a-acc-texto: color-mix(in srgb, var(--a-acc) 70%, #3a2400);
  --a-fonte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --a-titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  color-scheme: light;
}
[data-tema="escuro"] {
  --a-bg: #0d1222;
  --a-card: #141a2e;
  --a-card-2: #182037;
  --a-border: #232b45;
  --a-border-2: #2e3756;
  --a-text: #e7e9f1;
  --a-muted: #9ba3bd;
  --a-faint: #6d7592;
  --a-ok: #4cc79a; --a-ok-bg: rgba(76,199,154,.12);
  --a-warn: #f0b45a; --a-warn-bg: rgba(240,180,90,.12);
  --a-err: #f2867c; --a-err-bg: rgba(242,134,124,.12);
  --a-info: #8aa8ff; --a-info-bg: rgba(138,168,255,.12);
  --a-shadow: 0 1px 2px rgba(0,0,0,.3);
  --a-shadow-2: 0 18px 40px -14px rgba(0,0,0,.6);
  --a-acc-texto: color-mix(in srgb, var(--a-acc) 82%, #fff);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.admin-body { font-family: var(--a-fonte); background: var(--a-bg); color: var(--a-text); margin: 0; font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
a { text-decoration: none; color: inherit; }
::selection { background: var(--a-acc-fraco); }
:focus-visible { outline: 2px solid var(--a-acc); outline-offset: 2px; }

/* ---------------- estrutura ---------------- */
.admin-shell { display: flex; min-height: 100vh; background: linear-gradient(90deg, var(--a-tinta) 252px, var(--a-bg) 252px); }
@media (max-width: 900px) { .admin-shell { background: var(--a-bg); } }
.admin-sidebar {
  width: 252px; flex-shrink: 0; background: var(--a-tinta); color: #c9cee0;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 40;
  border-right: 1px solid rgba(255,255,255,.04);
}
.admin-brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 18px; color: #fff; }
.admin-brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--a-acc); color: var(--a-tinta); display: grid; place-items: center; font: 800 18px/1 var(--a-titulo); flex-shrink: 0; overflow: hidden; }
.admin-brand .mark img { width: 100%; height: 100%; object-fit: cover; }
.admin-brand strong { font: 700 16px/1.15 var(--a-titulo); letter-spacing: -.01em; display: block; }
.admin-brand small { display: block; color: #8189a5; font-size: 12px; margin-top: 2px; }
.admin-nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: #2a3352 transparent; }
.admin-nav-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #6b7392; padding: 16px 10px 6px; }
.admin-nav a {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: #b9bfd3; margin-bottom: 1px; position: relative; transition: background .12s, color .12s;
}
.admin-nav a i { width: 18px; text-align: center; font-size: 14px; color: #7d86a6; transition: color .12s; }
.admin-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-nav a:hover i { color: #c9cee0; }
.admin-nav a.active { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
.admin-nav a.active i { color: var(--a-acc); }
.admin-nav a.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--a-acc); }
.admin-nav a .contagem { margin-left: auto; font-size: 11.5px; font-weight: 700; background: var(--a-acc); color: var(--a-tinta); border-radius: 20px; padding: 1px 7px; }
.admin-side-rodape { padding: 12px 20px 16px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: #7d86a6; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.admin-side-rodape a:hover { color: #fff; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-faixa { background: var(--a-acc); color: var(--a-tinta); font-weight: 600; font-size: 13.5px; padding: 8px 28px; text-align: center; }
.admin-topbar {
  background: color-mix(in srgb, var(--a-bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--a-border); padding: 12px 28px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 30;
}
.admin-topbar .titulos { min-width: 0; }
.admin-topbar .area { font-size: 12px; font-weight: 600; color: var(--a-muted); letter-spacing: .02em; }
.admin-topbar h1 { font: 700 20px/1.2 var(--a-titulo); letter-spacing: -.015em; margin: 0; color: var(--a-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-topbar .acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; }
.btn-icone { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--a-muted); cursor: pointer; font-size: 15px; transition: background .12s, color .12s; flex-shrink: 0; }
.btn-icone:hover { background: var(--a-card); border-color: var(--a-border); color: var(--a-text); }
.btn-busca { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 12px; border-radius: 9px; border: 1px solid var(--a-border); background: var(--a-card); color: var(--a-faint); font: 500 13.5px var(--a-fonte); cursor: pointer; min-width: 220px; transition: border-color .12s; }
.btn-busca:hover { border-color: var(--a-border-2); color: var(--a-muted); }
.btn-busca kbd, .paleta kbd { margin-left: auto; font: 600 11px var(--a-fonte); background: var(--a-card-2); border: 1px solid var(--a-border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--a-muted); }
.admin-menu-celular { display: none; }

.admin-user { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; background: none; border: 1px solid transparent; cursor: pointer; padding: 3px 8px 3px 3px; border-radius: 30px; color: var(--a-text); transition: background .12s; font-family: var(--a-fonte); }
.admin-user:hover, .admin-user[aria-expanded="true"] { background: var(--a-card); border-color: var(--a-border); }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--a-tinta); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--a-fonte); flex-shrink: 0; overflow: hidden; letter-spacing: .02em; }
[data-tema="escuro"] .av { background: #2a3456; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.g { width: 64px; height: 64px; font-size: 22px; }
.av.xg { width: 96px; height: 96px; font-size: 32px; }
.admin-user .nome-curto { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user .chevron { font-size: 10px; color: var(--a-faint); }
.menu-usuario { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 12px; box-shadow: var(--a-shadow-2); padding: 6px; display: none; z-index: 60; }
.menu-usuario.aberto { display: block; animation: aparece .14s ease-out; }
.menu-usuario .quem { padding: 10px 10px 12px; border-bottom: 1px solid var(--a-border); margin-bottom: 6px; }
.menu-usuario .quem b { display: block; font-size: 14px; }
.menu-usuario .quem span { font-size: 12.5px; color: var(--a-muted); }
.menu-usuario a, .menu-usuario button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font: 500 13.5px var(--a-fonte); color: var(--a-text); background: none; border: 0; cursor: pointer; text-align: left; }
.menu-usuario a:hover, .menu-usuario button:hover { background: var(--a-card-2); }
.menu-usuario i { width: 16px; color: var(--a-muted); text-align: center; }
.menu-usuario hr { border: 0; border-top: 1px solid var(--a-border); margin: 6px 0; opacity: 1; }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } }

.admin-content { padding: 26px 28px 40px; width: 100%; max-width: 1280px; }
.admin-rodape { margin-top: auto; padding: 16px 28px 22px; font-size: 12.5px; color: var(--a-faint); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--a-border); }
.aviso-leitura { display: flex; gap: 10px; align-items: center; background: var(--a-info-bg); color: var(--a-info); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 13.5px; margin-bottom: 18px; }

/* ---------------- blocos ---------------- */
.admin-card { background: var(--a-card); border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: 22px; box-shadow: var(--a-shadow); margin-bottom: 18px; }
.admin-card h2 { font: 650 15.5px/1.3 var(--a-titulo); letter-spacing: -.005em; margin: 0 0 16px; color: var(--a-text); display: flex; align-items: center; gap: 9px; }
.admin-card h2 i { color: var(--a-muted); font-size: 14px; margin: 0; }
.admin-card h2 .dir { margin-left: auto; font: 500 13px var(--a-fonte); color: var(--a-muted); }
.admin-card h2 .dir a { color: var(--a-acc-texto); font-weight: 600; }
.admin-card.vazio { text-align: center; color: var(--a-muted); padding: 40px 22px; }
.admin-grid { display: grid; gap: 18px; }
.admin-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.admin-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.admin-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.admin-grid.cols-21 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.admin-grid > .admin-card { margin-bottom: 0; }
.admin-grid + .admin-grid, .admin-grid + .admin-card { margin-top: 18px; }

.kpi-card { background: var(--a-card); border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: 18px 18px 16px; box-shadow: var(--a-shadow); display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; min-width: 0; }
.kpi-card .kpi-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--a-card-2); color: var(--a-muted); font-size: 13px; border: 1px solid var(--a-border); margin-bottom: 6px; }
.kpi-card span, .kpi-card .rotulo { font-size: 13px; color: var(--a-muted); font-weight: 600; }
.kpi-card strong { display: block; font: 700 28px/1.1 var(--a-titulo); letter-spacing: -.02em; color: var(--a-text); }
.kpi-card .var { font-size: 12.5px; font-weight: 600; }
.kpi-card .var.sobe { color: var(--a-ok); } .kpi-card .var.desce { color: var(--a-err); } .kpi-card .var.igual { color: var(--a-faint); }
.kpi-card svg.spark { position: absolute; right: 14px; bottom: 14px; width: 96px; height: 34px; overflow: visible; }
a.kpi-card:hover { border-color: var(--a-border-2); }

/* ---------------- formulários ---------------- */
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--a-text); margin-bottom: 6px; }
.form-control, select.form-control, textarea.form-control, .admin-content input.form-control {
  width: 100%; padding: 9px 12px; border: 1px solid var(--a-border-2); border-radius: 9px; font: 14.5px/1.4 var(--a-fonte);
  background: var(--a-card); color: var(--a-text); transition: border-color .12s, box-shadow .12s;
}
.form-control::placeholder { color: var(--a-faint); }
.form-control:focus { outline: none; border-color: var(--a-acc); box-shadow: 0 0 0 3px var(--a-acc-fraco); background: var(--a-card); color: var(--a-text); }
.form-group { margin-bottom: 16px; }
.form-hint { font-size: 12.5px; color: var(--a-muted); margin-top: 5px; }
.form-check-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.form-check-row input[type=checkbox], .form-check-row input[type=radio] { width: 17px; height: 17px; accent-color: var(--a-acc); }
.form-check-row label { cursor: pointer; }
.chave { position: relative; width: 38px; height: 22px; flex-shrink: 0; display: inline-block; }
.chave input { opacity: 0; width: 0; height: 0; position: absolute; }
.chave span { position: absolute; inset: 0; background: var(--a-border-2); border-radius: 22px; transition: background .15s; cursor: pointer; }
.chave span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.chave input:checked + span { background: var(--a-acc); }
.chave input:checked + span::after { transform: translateX(16px); }
.chave input:focus-visible + span { outline: 2px solid var(--a-acc); outline-offset: 2px; }

.btn-a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font: 600 14px/1.2 var(--a-fonte); border: 1px solid transparent; cursor: pointer; transition: filter .12s, background .12s, border-color .12s; white-space: nowrap; }
.btn-a-gold, .btn-a-primario { background: var(--a-acc); color: #1a1205; }
.btn-a-navy { background: var(--a-tinta); color: #fff; }
[data-tema="escuro"] .btn-a-navy { background: #e7e9f1; color: #0d1222; }
.btn-a-outline { background: var(--a-card); border-color: var(--a-border-2); color: var(--a-text); }
.btn-a-outline:hover { border-color: var(--a-faint); }
.btn-a-danger { background: var(--a-err-bg); color: var(--a-err); }
.btn-a-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn-a:hover { filter: brightness(1.04); }
.btn-a:disabled, .btn-a[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

/* ---------------- tabelas ---------------- */
.table-responsive { overflow-x: auto; }
.table-a { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--a-text); }
.table-a th { text-align: left; font-size: 12px; font-weight: 600; color: var(--a-muted); padding: 9px 12px; border-bottom: 1px solid var(--a-border); background: var(--a-card-2); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.table-a td { padding: 11px 12px; border-bottom: 1px solid var(--a-border); vertical-align: middle; }
.table-a tr:last-child td { border-bottom: 0; }
.table-a tbody tr:hover td { background: var(--a-card-2); }
.table-a .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-a .fraco { color: var(--a-muted); font-size: 13px; }

.badge-a { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 100px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-a.ok { background: var(--a-ok-bg); color: var(--a-ok); }
.badge-a.warn { background: var(--a-warn-bg); color: var(--a-warn); }
.badge-a.off { background: var(--a-card-2); color: var(--a-muted); border: 1px solid var(--a-border); }
.badge-a.danger { background: var(--a-err-bg); color: var(--a-err); }
.badge-a.info { background: var(--a-info-bg); color: var(--a-info); }

.alert-a { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 10px; font-size: 14px; font-weight: 500; margin-bottom: 18px; border: 1px solid transparent; }
.alert-a > i { margin-top: 2px; }
.alert-a.ok { background: var(--a-ok-bg); color: var(--a-ok); border-color: color-mix(in srgb, var(--a-ok) 20%, transparent); }
.alert-a.erro { background: var(--a-err-bg); color: var(--a-err); border-color: color-mix(in srgb, var(--a-err) 20%, transparent); }
.alert-a.info { background: var(--a-info-bg); color: var(--a-info); }

.color-swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--a-border); flex-shrink: 0; }
.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type=color] { width: 44px; height: 38px; border: 1px solid var(--a-border-2); border-radius: 8px; padding: 2px; background: var(--a-card); cursor: pointer; }

/* abas internas das telas */
.abas-a { display: flex; gap: 2px; border-bottom: 1px solid var(--a-border); margin: -4px 0 20px; overflow-x: auto; scrollbar-width: none; }
.abas-a a, .abas-a button { padding: 10px 14px; font: 600 14px var(--a-fonte); color: var(--a-muted); border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.abas-a a:hover, .abas-a button:hover { color: var(--a-text); }
.abas-a .ativa, .abas-a [aria-selected="true"] { color: var(--a-text); border-bottom-color: var(--a-acc); }

/* lista simples */
.lista-a { list-style: none; margin: 0; padding: 0; }
.lista-a li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--a-border); }
.lista-a li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-a li:first-child { padding-top: 0; }
.lista-a .princ { min-width: 0; flex: 1; }
.lista-a .princ b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-a .princ span { font-size: 12.5px; color: var(--a-muted); }

/* barras horizontais (relatórios) */
.barras { display: grid; gap: 12px; }
.barras .l { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; font-size: 13.5px; }
.barras .l .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras .l .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.barras .l .b { grid-column: 1 / -1; height: 6px; background: var(--a-card-2); border-radius: 6px; overflow: hidden; }
.barras .l .b i { display: block; height: 100%; background: var(--a-acc); border-radius: 6px; }

.grafico { position: relative; height: 260px; }
.grafico.baixo { height: 200px; }
.legenda-a { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--a-muted); }
.legenda-a span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-a i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* filtros de período */
.filtros-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.seg { display: inline-flex; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 9px; padding: 3px; }
.seg a { padding: 5px 11px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--a-muted); }
.seg a.ativo { background: var(--a-tinta); color: #fff; }
[data-tema="escuro"] .seg a.ativo { background: #e7e9f1; color: #0d1222; }

/* busca rápida (Ctrl+K) */
.paleta-fundo { position: fixed; inset: 0; background: rgba(8,12,24,.45); backdrop-filter: blur(2px); z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.paleta-fundo.aberta { display: flex; }
.paleta { width: 100%; max-width: 560px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); overflow: hidden; animation: aparece .14s ease-out; }
.paleta .entrada { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--a-border); }
.paleta .entrada i { color: var(--a-faint); }
.paleta input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 16px var(--a-fonte); color: var(--a-text); }
.paleta ul { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow-y: auto; }
.paleta li a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--a-text); font-size: 14px; }
.paleta li a i { width: 18px; text-align: center; color: var(--a-muted); }
.paleta li a small { margin-left: auto; color: var(--a-faint); font-size: 12px; }
.paleta li.sel a { background: var(--a-acc-fraco); }
.paleta li.sel a i { color: var(--a-acc-texto); }
.paleta .grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--a-faint); padding: 10px 10px 4px; }
.paleta .nada { padding: 22px; text-align: center; color: var(--a-muted); }
.paleta .rodape { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--a-border); font-size: 12px; color: var(--a-faint); }

/* modais do Bootstrap no tema escuro */
.modal-content { background: var(--a-card); color: var(--a-text); border: 1px solid var(--a-border); border-radius: 14px; }
.modal-header, .modal-footer { border-color: var(--a-border); }
[data-tema="escuro"] .btn-close { filter: invert(1) grayscale(1); }
.nav-tabs { border-color: var(--a-border); }
.nav-tabs .nav-link { color: var(--a-muted); }
.nav-tabs .nav-link.active { background: var(--a-card); color: var(--a-text); border-color: var(--a-border) var(--a-border) var(--a-card); }

/* ---------------- entrada (login) ---------------- */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); background: var(--a-bg); }
.login-arte { background: var(--a-tinta); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-arte .num { font: 900 clamp(120px, 16vw, 230px)/.8 "Big Shoulders Display", Impact, sans-serif; color: color-mix(in srgb, var(--a-acc) 85%, transparent); letter-spacing: .01em; }
.login-arte .marca { display: flex; align-items: center; gap: 11px; font: 800 20px var(--a-titulo); position: relative; }
.login-arte .marca i { width: 34px; height: 34px; border-radius: 9px; background: var(--a-acc); color: var(--a-tinta); display: grid; place-items: center; font: 800 18px var(--a-titulo); font-style: normal; }
.login-arte p { color: #9aa2bf; max-width: 34ch; margin: 18px 0 0; font-size: 15px; position: relative; }
.login-arte .pontos { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px); background-size: 28px 28px; pointer-events: none; }
.login-lado { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.login-card { background: transparent; width: 100%; max-width: 360px; box-shadow: none; padding: 0; border-radius: 0; }
.login-card .mark { display: none; }
.login-card h1 { font: 700 26px/1.2 var(--a-titulo); letter-spacing: -.02em; color: var(--a-text); margin: 0 0 6px; text-align: left; }
.login-card p.sub { color: var(--a-muted); font-size: 14.5px; margin: 0 0 26px; text-align: left; }
.login-card .btn-a { width: 100%; padding: 11px 16px; }

/* ---------------- editor de artigos ---------------- */
.wys-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border: 1px solid var(--a-border-2); border-bottom: none; border-radius: 9px 9px 0 0; background: var(--a-card-2); }
.wys-toolbar button { border: none; background: none; width: 32px; height: 32px; border-radius: 7px; cursor: pointer; color: var(--a-text); font-size: 13px; }
.wys-toolbar button:hover { background: var(--a-border); }
.wys-editor { min-height: 340px; border: 1px solid var(--a-border-2); border-radius: 0 0 9px 9px; padding: 18px; font-size: 15px; line-height: 1.7; background: var(--a-card); }
.wys-editor:focus { outline: none; border-color: var(--a-acc); }
.wys-editor img { max-width: 100%; border-radius: 10px; }
.cropfoto-preview { width: 100px; height: 100px; border-radius: 12px; object-fit: cover; background: var(--a-bg); border: 1px solid var(--a-border); }

/* ---------------- ajuda ---------------- */
.ajuda-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 22px; align-items: start; }
.ajuda-indice { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.ajuda-indice a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--a-muted); }
.ajuda-indice a:hover { background: var(--a-card); color: var(--a-text); }
.ajuda-indice a i { width: 16px; text-align: center; }
.ajuda-topico { scroll-margin-top: 86px; }
.ajuda-topico h3 { font: 650 17px var(--a-titulo); margin: 0 0 4px; }
.ajuda-topico .onde { font-size: 12.5px; color: var(--a-muted); margin-bottom: 12px; }
.ajuda-topico ol, .ajuda-topico ul { padding-left: 20px; margin: 8px 0; }
.ajuda-topico li { margin-bottom: 5px; }
.ajuda-topico p { margin: 0 0 8px; }
.ajuda-topico .dica { background: var(--a-acc-fraco); border-radius: 9px; padding: 10px 13px; font-size: 13.5px; margin-top: 10px; }
.ajuda-topico.destaque { box-shadow: 0 0 0 2px var(--a-acc); }
mark { background: var(--a-acc-fraco); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------------- permissões ---------------- */
.niveis { display: inline-flex; border: 1px solid var(--a-border-2); border-radius: 8px; overflow: hidden; }
.niveis label { cursor: pointer; margin: 0; }
.niveis input { position: absolute; opacity: 0; pointer-events: none; }
.niveis span { display: block; white-space: nowrap; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--a-muted); border-left: 1px solid var(--a-border-2); }
.niveis label:first-child span { border-left: 0; }
.niveis input:checked + span { background: var(--a-tinta); color: #fff; }
[data-tema="escuro"] .niveis input:checked + span { background: #e7e9f1; color: #0d1222; }
.niveis input:focus-visible + span { outline: 2px solid var(--a-acc); outline-offset: -2px; }
.ponto-cor { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---------------- celular ---------------- */
@media (max-width: 1100px) {
  .admin-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-grid.cols-21 { grid-template-columns: minmax(0,1fr); }
  .btn-busca { min-width: 0; }
  .btn-busca .txt { display: none; }
}
@media (max-width: 900px) {
  .admin-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 60px rgba(0,0,0,.4); }
  .admin-sidebar.aberto { transform: none; }
  .admin-menu-celular { display: grid; }
  .admin-topbar { padding: 10px 16px; }
  .admin-content { padding: 18px 16px 32px; }
  .admin-rodape { padding: 14px 16px 20px; }
  .admin-grid.cols-2, .admin-grid.cols-3 { grid-template-columns: minmax(0,1fr); }
  .admin-user .nome-curto, .admin-user .chevron { display: none; }
  .ajuda-layout { grid-template-columns: minmax(0,1fr); }
  .ajuda-indice { position: static; max-height: none; }
  .login-shell { grid-template-columns: minmax(0,1fr); }
  .login-arte { min-height: 200px; padding: 28px; }
  .login-arte .num { font-size: 110px; }
  .admin-topbar h1 { font-size: 17px; }
}
@media (max-width: 560px) {
  .admin-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .admin-grid.cols-4 .kpi-card { padding: 14px; }
  .admin-grid.cols-4 .kpi-card strong { font-size: 22px; }
  .admin-grid.cols-4 .kpi-card .var { font-size: 11.5px; }
  .kpi-card svg.spark { display: none; }
  .btn-busca { display: none; }
}
@media (max-width: 700px) {
  .quadro-perm thead { display: none; }
  .quadro-perm tr { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--a-border); }
  .quadro-perm td { border: 0; padding: 0 4px; }
  .quadro-perm tbody tr:hover td { background: none; }
}
.fundo-menu { position: fixed; inset: 0; background: rgba(8,12,24,.4); z-index: 35; display: none; }
.fundo-menu.aberto { display: block; }
@media print { .admin-sidebar, .admin-topbar, .admin-rodape, .admin-faixa, .filtros-a, .abas-a { display: none !important; } .admin-content { padding: 0; max-width: none; } body.admin-body { background: #fff; } }