/* ==========================================================
   VISUAL NOVO - CTLNET
   Pedido do Zero, 2026-09-17: mockup em anexo (painel-do-dia.html,
   "Mockup - Painel do Dia CTLNET") - "quero que o app todo siga esse
   visual novo... sem manter nada do nosso antigo", com o seletor de 5
   temas do mockup como funcionalidade real (persistida, não só
   decorativa). Escopo inicial (mesmo dia) era só as telas ADMIN; Zero
   pediu na sequência pra estender pras telas de campo do técnico também
   ("na parte dos tecnico tbm, faça no app todo") - a classe continua se
   chamando `admin-novo` (era mais trabalho migrar todo mundo pro nome
   novo do que só reaproveitar), mas hoje cobre o app inteiro.

   Tudo aqui vive dentro de `body.admin-novo` de propósito - garante que
   mesmo se esse arquivo for carregado sem querer numa tela ainda não
   convertida, ou se o nome de classe colidir com algo, nada vaza pra
   fora do escopo. Nomes de classe copiados quase 1:1 do mockup (facilita
   comparar os dois lado a lado depois).
   ========================================================== */

body.admin-novo {
    --bg:#0b1220; --bg2:#16213b; --card:#121b2e; --card-border:#1e2a42;
    --text:#e8edf7; --muted:#8ea0c0;
    --accent:#f5822b; --accent2:#3f8cd8;
    --red:#ff4d5e; --green:#2ecc9a; --yellow:#ffc75f; --purple:#c060e8; --cyan:#3fb7d8;
}
body.admin-novo[data-theme="purple"]{
    --bg:#120b1f; --bg2:#1e1533; --card:#1a1230; --card-border:#2c1f4a;
    --accent:#b56bff; --accent2:#7c5cff; --red:#ff5d8f; --green:#3fe0b0; --yellow:#ffd166; --cyan:#8a7bff;
}
body.admin-novo[data-theme="emerald"]{
    --bg:#06140f; --bg2:#0d241a; --card:#0f1f18; --card-border:#1c3a2c;
    --accent:#2ecc9a; --accent2:#20a4f3; --red:#ff6b6b; --green:#4ade80; --yellow:#facc15; --cyan:#34d399;
}
body.admin-novo[data-theme="sunset"]{
    --bg:#1a0f0a; --bg2:#2b1710; --card:#211510; --card-border:#3c241a;
    --accent:#ff7a3d; --accent2:#ff4d6d; --red:#ff3b5c; --green:#3fc98a; --yellow:#ffb14d; --cyan:#ff8c66;
}
body.admin-novo[data-theme="light"]{
    --bg:#eef1f7; --bg2:#ffffff; --card:#ffffff; --card-border:#dde3ee;
    --text:#1b2436; --muted:#5c6a85; --accent:#e8730f; --accent2:#2f6fd6;
    --red:#e0334a; --green:#1fa980; --yellow:#c98b0a; --cyan:#1c95b0;
}

/* Achado real, 2026-09-17 (Zero testou ao vivo no celular: "o tema branco
   esta inutilizavel... os botoes estao feio em todos os temas mas so os
   botoes de menu, uns ta claro e outros escuro") - o botão de admin
   (admin-menu.js), o de abrir a barra lateral (desktop-sidebar.js), o
   toast e o modal de confirmação são compartilhados com TODA tela do app
   (antiga e nova) e continuam usando `.glass-card`/`.glass`/`--accent`
   de base.css, que só trocam de cor quando `body.light-mode` está
   presente - o tema novo usa `data-theme` num atributo diferente, então
   esses elementos injetados por JS ficavam sempre no visual ESCURO
   padrão, mesmo com um tema claro escolhido (círculo quase invisível
   sobre fundo branco). Em vez de editar esses 4 arquivos JS compartilhados
   (risco de quebrar as telas antigas que ainda dependem deles), redefine
   as MESMAS variáveis antigas aqui dentro de body.admin-novo - qualquer
   `.glass-card`/`.glass` (nosso ou injetado por JS de fora) passa a
   herdar a cor certa do tema novo automaticamente, sem tocar em mais
   nada. */
body.admin-novo {
    --glass-card-bg: rgba(255,255,255,0.05);
    --glass-border: var(--card-border);
    --glass-heavy-bg: var(--card);
    --text-title: var(--text);
    --text-body: var(--muted);
    --input-bg: rgba(0,0,0,0.25);
    --shadow-color: rgba(0,0,0,0.35);
}
body.admin-novo[data-theme="light"] {
    --glass-card-bg: rgba(27,36,54,0.04);
    --input-bg: rgba(27,36,54,0.05);
    --shadow-color: rgba(27,36,54,0.12);
}

/* Desliga a "aurora" de base.css (body::before/::after) - o mockup usa um
   fundo liso de 2 paradas, sem textura de grade nem glow animado por
   cima. Fundo do body redefinido direto (sobrepõe --bg-gradient de
   base.css só dentro do escopo admin-novo). */
body.admin-novo::before, body.admin-novo::after { content: none !important; }
body.admin-novo {
    background: radial-gradient(circle at 20% -10%, var(--bg2) 0%, var(--bg) 55%) !important;
    color: var(--text) !important;
    transition: background .3s ease, color .3s ease;
}
body.admin-novo.light-mode { color-scheme: light; }
body.admin-novo:not(.light-mode) { color-scheme: dark; }

/* Achado real, 2026-09-17 (Zero testou ao vivo: números/rótulos dos cards
   "Hoje" saindo cinza-apagado em vez da cor escura pensada pra ler bem
   em cima do fundo colorido) - base.css tem uma regra global
   `p, .text-slate-300, .text-slate-400 { color: var(--text-body)
   !important; }` (pensada pra dar uma cor padrão em qualquer <p> sem
   estilo próprio) que, por ser !important, ganha de QUALQUER cor que eu
   tentasse dar via classe aqui, já que quase todo texto do mockup usa
   <p> (mesma convenção do resto do app). Uma regra !important só perde
   pra outra !important MAIS específica - `body.admin-novo p` (elemento +
   classe + elemento) já basta pra ganhar de `p` sozinho. Restaura a cor
   padrão do tema aqui; cada classe que precisa de uma cor DIFERENTE
   (rótulo cinza, número escuro em cima de fundo colorido, etc) marca a
   sua própria como !important logo abaixo, pra ganhar dessa regra geral
   pela MESMA lógica. */
body.admin-novo p { color: var(--text) !important; }

/* Mesma colisão, versão Tailwind: `<p class="text-red-400">` etc (usados
   nas listas geradas por JS - atrasos, contador por técnico) também perdem
   pra regra do base.css por não terem !important. Cores batem com as que
   já usamos em .card-hoje-*/.stat.c-* pra ficar consistente. */
body.admin-novo p.text-red-400{ color:#f87171 !important; }
body.admin-novo p.text-blue-400{ color:#60a5fa !important; }
body.admin-novo p.text-yellow-400{ color:#facc15 !important; }
body.admin-novo p.text-green-400{ color:#4ade80 !important; }

body.admin-novo .wrap{max-width:640px; margin:0 auto; padding:0 16px;}

/* Achado real, 2026-09-17 (testando ao vivo): a troca de logo dark/light
   dependia de `body.light-mode` (sistema antigo, theme.js) - o tema novo
   usa `data-theme` num atributo diferente, então as duas imagens (dark E
   light) ficavam visíveis ao mesmo tempo, sobrepostas, em qualquer tema
   novo. Central aqui (não em cada página) porque esse mesmo par de <img>
   se repete no cabeçalho de toda tela admin. */
body.admin-novo .ctlnet-logo-wrap-sm{ display:inline-flex; align-items:center; }
body.admin-novo .ctlnet-logo-img.logo-light{ display:none; }
body.admin-novo[data-theme="light"] .ctlnet-logo-img.logo-dark{ display:none; }
body.admin-novo[data-theme="light"] .ctlnet-logo-img.logo-light{ display:block; }

/* admin-topbar.js (desktop) injeta seu PRÓPRIO botão de tema chamando o
   toggleTheme() antigo (7 temas diferentes, sem relação com os 5 daqui) -
   escondido só nas telas convertidas, já que o ícone novo (admin-theme.js)
   cobre a mesma função. Não editado no arquivo compartilhado pra não
   quebrar as telas admin ainda não convertidas, que continuam dependendo
   dele. */
body.admin-novo #admin-topbar-mount button[onclick="toggleTheme()"]{ display:none !important; }

/* ---------- BOTÃO DE TEMA (ícone único, clique cicla pro próximo) ---------- */
/* Pedido do Zero, 2026-09-17 (2 rodadas testando ao vivo):
   1) "um icone so q vc clica e muda o tema" - nada de barra fixa com 5
      pílulas escritas.
   2) "q ele n mostre os tema, q vc so clique nele e altere o tema" - nem
      dropdown: o ícone (.nav-circle, mesmo estilo dos outros do
      cabeçalho) já pula pro PRÓXIMO tema a cada clique, sem abrir nada.
   Toda a lógica de ciclo/persistência mora só no JS (admin-theme.js) -
   aqui não sobra CSS específico, o botão usa .nav-circle padrão. */

/* ---------- CABEÇALHO / SAUDAÇÃO ---------- */
/* Achado real, 2026-09-17 (Zero circulou no print: "espaço vazio" enorme
   embaixo dos ícones) - não era espaço "decorativo" sobrando, era um bug
   de alinhamento: com 6 ícones no header (logout/voltar-OS/admin/
   tema/chat/sino), .nav-icons quebra pra 2 linhas em tela de celular, e
   `align-items:center` centralizava o bloco da marca (mais baixo/mais
   curto) no MEIO dessa altura toda - sobrava vazio embaixo do sino E em
   cima da logo ao mesmo tempo. `flex-start` gruda a marca no topo, junto
   com a primeira linha de ícones, sem sobra nenhuma. */
body.admin-novo .adm-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:10px;}
body.admin-novo .nav-icons{display:flex; gap:8px; flex-wrap:wrap;}
body.admin-novo .nav-circle{
    width:38px;height:38px;border-radius:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
    border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer; transition:transform .15s ease;
    color:var(--muted);
}
body.admin-novo .nav-circle:active{transform:scale(0.9);}
body.admin-novo .brand{font-size:20px;font-weight:800; display:flex; gap:4px; align-items:center; white-space:nowrap;}
body.admin-novo .brand .spark{color:var(--accent) !important;}
body.admin-novo .sub{font-size:9px;color:var(--muted) !important;letter-spacing:1.5px;font-weight:700; text-align:right;}

body.admin-novo .greet{
    background:var(--card); border:1px solid var(--card-border); border-radius:20px;
    padding:16px 18px; display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px; gap:10px;
}
body.admin-novo .greet .hello{font-size:10px; color:var(--muted) !important; font-weight:700; letter-spacing:.5px;}
body.admin-novo .greet .name{font-size:18px; font-weight:800; margin:2px 0;}
body.admin-novo .greet .date{font-size:11px; color:var(--muted) !important;}
body.admin-novo .avatar{width:40px;height:40px;border-radius:50%; border:1.5px solid var(--card-border); display:flex;align-items:center;justify-content:center; flex-shrink:0;}

body.admin-novo h3.section{
    font-size:11px; letter-spacing:1px; color:var(--muted) !important; font-weight:800;
    margin:22px 0 10px; display:flex; align-items:center; gap:8px; text-transform:uppercase;
}
body.admin-novo h3.section::after{content:""; flex:1; height:1px; background:var(--card-border);}

/* ---------- ALERTAS PRIORITÁRIOS ---------- */
/* Pedido do Zero, 2026-09-17 (comparando com print do mockup): "em vez de
   deixar a cor em tudo deixar do jeito q te enviei" - volta pro cartão
   escuro com barrinha de cor + ícone em badge, em vez do preenchimento
   sólido que eu tinha colocado (achei que "cor morta" pedia mais tinta,
   mas o pedido era esse visual mais contido, com acento só no essencial). */
body.admin-novo .alert-row{display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
body.admin-novo .alert-card{
    position:relative; flex:1; min-width:130px; border-radius:16px; padding:14px 14px 14px 20px;
    display:flex; align-items:center; gap:12px;
    background:var(--card); border:1px solid var(--card-border); cursor:pointer; transition:transform .15s ease;
    animation:admPopIn .4s ease both; text-decoration:none; overflow:hidden;
}
body.admin-novo .alert-card:active{transform:scale(0.96);}
body.admin-novo .alert-card::before{
    content:""; position:absolute; left:8px; top:14px; bottom:14px; width:3px; border-radius:999px;
}
body.admin-novo .alert-card.critical::before{background:var(--red);}
body.admin-novo .alert-card.warn::before{background:var(--yellow);}
body.admin-novo .alert-icon{width:42px;height:42px;border-radius:12px; display:flex;align-items:center;justify-content:center; flex-shrink:0;}
body.admin-novo .alert-icon svg{width:18px; height:18px;}
body.admin-novo .alert-card.critical .alert-icon{background:color-mix(in srgb, var(--red) 18%, transparent);}
body.admin-novo .alert-card.critical .alert-icon svg{stroke:var(--red);}
body.admin-novo .alert-card.warn .alert-icon{background:color-mix(in srgb, var(--yellow) 18%, transparent);}
body.admin-novo .alert-card.warn .alert-icon svg{stroke:var(--yellow);}
body.admin-novo .alert-num{font-size:22px; font-weight:800; line-height:1;}
body.admin-novo .alert-card.critical .alert-num{color:var(--red) !important;}
body.admin-novo .alert-card.warn .alert-num{color:var(--yellow) !important;}
body.admin-novo .alert-lbl{font-size:10px; font-weight:700; margin-top:2px; color:var(--muted) !important;}

/* Pedido do Zero, 2026-09-17: usar um protótipo do Figma Make (feito a
   partir do mesmo painel-do-dia) como referência de acabamento. O
   "Rompimento hoje" de lá ganha destaque de alerta de verdade (contorno
   colorido + resplendor + "ver tudo") em vez de ficar um mini-card neutro
   igual qualquer outro atalho. Cor parametrizada via --cor-alerta (default
   vermelho, já que o primeiro uso - rompimento - é sempre urgência) pra
   dar pra reaproveitar em resumos informativos de outras cores nas telas
   de detalhe (agendadas/ativos/atrasadas/iniciadas/finalizadas), só
   setando --cor-alerta inline no elemento. */
body.admin-novo .alert-card-full{
    --cor-alerta: var(--red);
    position:relative; width:100%; border-radius:16px; padding:14px 16px 14px 22px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--card); border:1px solid color-mix(in srgb, var(--cor-alerta) 40%, var(--card-border));
    box-shadow:0 8px 20px -10px color-mix(in srgb, var(--cor-alerta) 55%, transparent);
    cursor:pointer; transition:transform .15s ease; animation:admPopIn .4s ease both;
    text-decoration:none; overflow:hidden;
}
body.admin-novo .alert-card-full:active{transform:scale(0.98);}
body.admin-novo .alert-card-full::before{
    content:""; position:absolute; left:8px; top:14px; bottom:14px; width:3px; border-radius:999px; background:var(--cor-alerta);
}
body.admin-novo .alert-card-full .alert-card-full-left{display:flex; align-items:center; gap:12px; min-width:0;}
body.admin-novo .alert-card-full .alert-icon{background:color-mix(in srgb, var(--cor-alerta) 18%, transparent);}
body.admin-novo .alert-card-full .alert-icon svg, body.admin-novo .alert-card-full .alert-icon i{color:var(--cor-alerta); font-size:18px;}
body.admin-novo .alert-card-full .alert-num{color:var(--cor-alerta) !important;}
body.admin-novo .alert-card-full .alert-lbl{color:var(--muted) !important; margin-top:0;}
body.admin-novo .alert-card-full .ver-tudo{
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.2px; white-space:nowrap; flex-shrink:0;
    color:var(--cor-alerta); background:color-mix(in srgb, var(--cor-alerta) 14%, transparent); padding:8px 12px; border-radius:999px;
}

/* Cabeçalho de card com ícone em badge + descrição embaixo do título -
   mesmo padrão do card "OS Finalizadas por Tipo" do protótipo. Opt-in
   (.card-title continua igual pros cards que só têm ícone+texto numa
   linha só, como os de admin_painel.html). */
body.admin-novo .card-title-row{display:flex; align-items:flex-start; gap:10px; margin-bottom:14px;}
body.admin-novo .card-title-icon{width:34px; height:34px; border-radius:10px; background:color-mix(in srgb, var(--accent) 16%, transparent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
body.admin-novo .card-title-icon svg{width:16px; height:16px; color:var(--accent);}
body.admin-novo .card-title-row .t{font-size:13px; font-weight:800; color:var(--text) !important;}
body.admin-novo .card-title-row .d{font-size:10.5px; color:var(--muted) !important; margin-top:1px;}

@keyframes admPopIn{from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);}}

/* ---------- GRADE DE ESTATÍSTICAS ---------- */
/* Mesmo tratamento do .alert-card (ver comentário lá): cartão escuro,
   barrinha colorida no topo, ícone em badge - em vez do preenchimento
   sólido de antes. */
body.admin-novo .stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:10px;}
body.admin-novo .stat{
    position:relative; border-radius:16px; padding:14px 6px 12px; text-align:center;
    border:1px solid var(--card-border); background:var(--card);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    cursor:pointer; transition:transform .15s ease; animation:admPopIn .4s ease both;
    text-decoration:none; overflow:hidden;
}
body.admin-novo .stat:active{transform:scale(0.94);}
body.admin-novo .stat::before{
    content:""; position:absolute; top:0; left:14px; right:14px; height:3px; border-radius:0 0 999px 999px;
    background:var(--cor-stat);
}
body.admin-novo .stat .stat-icon{
    width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--cor-stat) 18%, transparent);
}
body.admin-novo .stat .stat-icon i, body.admin-novo .stat .stat-icon svg{ font-size:14px; width:16px; height:16px; color:var(--cor-stat); stroke:var(--cor-stat); }
body.admin-novo .stat .num{font-size:18px; font-weight:800; color:var(--text) !important;}
body.admin-novo .stat .lbl{font-size:8.5px; font-weight:800; letter-spacing:.2px; color:var(--muted) !important;}
body.admin-novo .stat.c-blue{ --cor-stat:var(--accent2); }
body.admin-novo .stat.c-green{ --cor-stat:var(--green); }
body.admin-novo .stat.c-red{ --cor-stat:var(--red); }
body.admin-novo .stat.c-yellow{ --cor-stat:var(--yellow); }
body.admin-novo .stat.neutral{ --cor-stat:var(--accent); }
body.admin-novo .stat.ativo{ box-shadow:0 0 0 2px var(--cor-stat); }

/* ---------- CARD GENÉRICO ---------- */
body.admin-novo .card{
    background:var(--card); border:1.5px solid var(--card-border); border-radius:20px;
    padding:18px; margin-bottom:14px;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
}
body.admin-novo .card-title{
    display:flex;align-items:center;gap:8px;
    font-size:12px; font-weight:800; color:var(--accent);
    letter-spacing:.4px; margin-bottom:14px; text-transform:uppercase;
}
body.admin-novo .card-title svg{width:15px; height:15px; flex-shrink:0;}

/* ---------- GRÁFICO DE BARRAS ---------- */
body.admin-novo .chart{display:flex; align-items:flex-end; gap:4px; height:120px; margin-bottom:8px; overflow-x:auto;}
body.admin-novo .bar-col{flex:1; min-width:14px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%;}
body.admin-novo .bar-stack{width:100%; max-width:16px; border-radius:5px 5px 3px 3px; display:flex; flex-direction:column-reverse; overflow:hidden; background:rgba(255,255,255,0.03);}
body.admin-novo .bar-seg{width:100%; animation:admGrowUp .8s ease-out both;}
@keyframes admGrowUp{from{height:0 !important;}}
body.admin-novo .bar-date{font-size:8px; color:var(--muted) !important; margin-top:5px; font-weight:600;}
body.admin-novo .legend{display:flex; flex-wrap:wrap; gap:7px 12px; padding-top:12px; border-top:1px solid var(--card-border);}
body.admin-novo .legend-item{display:flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); font-weight:600;}
body.admin-novo .adm-dot{width:8px;height:8px;border-radius:50%; flex-shrink:0; display:inline-block;}

/* ---------- RESUMO COM DONUT ---------- */
body.admin-novo .summary{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
body.admin-novo .donut-wrap{position:relative; width:96px; height:96px; flex-shrink:0;}
body.admin-novo .donut-wrap svg{transform:rotate(-90deg); width:100%; height:100%;}
body.admin-novo .donut-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
body.admin-novo .donut-label .num{font-size:20px; font-weight:800;}
body.admin-novo .donut-label .txt{font-size:8px; color:var(--muted) !important; font-weight:700; letter-spacing:.4px;}
body.admin-novo .legend-v{display:flex; flex-direction:column; gap:10px; flex:1; min-width:120px;}
body.admin-novo .legend-v-item{display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700;}
body.admin-novo .legend-v-item .l{display:flex; align-items:center; gap:8px; color:var(--text) !important;}

/* ---------- SAÚDE / STATUS ---------- */
body.admin-novo .health-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
body.admin-novo .health-item{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; background:var(--bg2); border:1px solid var(--card-border); border-radius:12px; padding:10px 12px;}
body.admin-novo .status-dot{width:10px;height:10px;border-radius:50%; flex-shrink:0;}
body.admin-novo .status-dot.on{background:var(--green); box-shadow:0 0 0 3px rgba(46,204,154,0.25); animation:admPing 2s infinite;}
body.admin-novo .status-dot.off{background:var(--muted); box-shadow:0 0 0 3px rgba(142,160,192,0.2);}
@keyframes admPing{0%{box-shadow:0 0 0 0 rgba(46,204,154,.5);} 70%{box-shadow:0 0 0 6px rgba(46,204,154,0);} 100%{box-shadow:0 0 0 0 rgba(46,204,154,0);}}

/* ---------- MINI-CARDS ---------- */
body.admin-novo .mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px;}
body.admin-novo .mini-card{background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:14px 16px;}
body.admin-novo .mini-card .mt{font-size:10px; color:var(--muted) !important; font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:8px;}
body.admin-novo .mini-card .mv{font-size:14px; font-weight:800; margin-bottom:2px;}
body.admin-novo .mini-card .ms{font-size:10.5px; color:var(--muted) !important;}

/* ---------- FORMULÁRIOS / BOTÕES ---------- */
body.admin-novo .form-label{font-size:11px; color:var(--muted); margin-bottom:6px; display:block; font-weight:700;}
body.admin-novo .adm-input{
    width:100%; background:var(--bg2); border:1px solid var(--card-border); border-radius:14px;
    padding:13px 16px; color:var(--text); font-size:14px; margin-bottom:10px; outline:none;
    transition:border-color .15s ease;
}
body.admin-novo .adm-input:focus{border-color:var(--accent2);}
body.admin-novo .input-row{display:flex; gap:10px;}
body.admin-novo .btn-primary{
    width:100%; border:none; border-radius:14px; padding:14px 0;
    background:linear-gradient(135deg, var(--accent2), var(--accent)); color:#fff;
    font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px;
    cursor:pointer; transition:transform .15s ease; text-transform:uppercase;
}
body.admin-novo .btn-primary:active{transform:scale(0.97);}
body.admin-novo .btn-secondary{
    width:100%; border:1px solid var(--card-border); border-radius:14px; padding:14px 0;
    background:var(--card); color:var(--text);
    font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px;
    cursor:pointer; transition:transform .15s ease; text-transform:uppercase;
}
body.admin-novo .btn-secondary:active{transform:scale(0.97);}

/* ---------- GRADE DE FERRAMENTAS ---------- */
body.admin-novo .tools-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
body.admin-novo .tool{
    background:var(--card); border:1px solid var(--card-border); border-radius:16px;
    padding:14px; display:flex; align-items:center; gap:12px;
    cursor:pointer; transition:transform .15s ease, border-color .15s ease;
    text-decoration:none; color:var(--text);
}
body.admin-novo .tool:active{transform:scale(0.95);}
body.admin-novo .tool-icon{width:36px;height:36px;border-radius:11px; display:flex;align-items:center;justify-content:center; font-size:17px; flex-shrink:0;}
body.admin-novo .tool-name{font-size:11px; font-weight:800; line-height:1.2;}

body.admin-novo footer{text-align:center; color:var(--muted); font-size:11px; margin-top:20px;}

/* ---------- TABELAS (usadas em Auditoria/Tempos/Ranking/etc) ---------- */
body.admin-novo .adm-table{width:100%; border-collapse:collapse; font-size:12px;}
body.admin-novo .adm-table th{text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:800; padding:8px 10px; border-bottom:1px solid var(--card-border);}
body.admin-novo .adm-table td{padding:10px; border-bottom:1px solid var(--card-border); font-weight:600;}
body.admin-novo .adm-table tr:last-child td{border-bottom:none;}

/* ---------- PÍLULAS DE ABA/FILTRO (substitui .pill-aba/.pill-preset) ---------- */
body.admin-novo .adm-pill{
    padding:9px 14px; border-radius:999px; font-size:10.5px; font-weight:800; text-transform:uppercase;
    background:var(--card); border:1px solid var(--card-border); color:var(--muted);
    cursor:pointer; transition:transform .15s ease, border-color .15s ease, color .15s ease;
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
body.admin-novo .adm-pill:active{transform:scale(0.95);}
body.admin-novo .adm-pill.active{color:var(--text); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--card));}

@media (prefers-reduced-motion: reduce) {
    body.admin-novo * { animation: none !important; transition: none !important; }
}