/* Painel principal (admin_panel/dashboard.html) — layout do "Modelo B":
   menu lateral com as funções agrupadas, cabeçalho enxuto, KPIs e tabela.
   O tema ESCURO (cores de sempre do HealthIA) é o padrão; o CLARO (paleta zt,
   #465dd1 sobre #f5f6fa) entra quando <html data-tema="claro">. Só variáveis
   mudam entre os dois. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Marca (mesmos valores de antes) */
  --teal:   #0EA5E9;
  --lteal:  #38BDF8;
  --green:  #10B981;
  --orange: #F59E0B;
  --red:    #EF4444;
  --white:  #F8FAFF;
  --gray:   #94A3B8;
  --dark:   #071525;
  /* Papéis de cor da estrutura */
  --bg:#071525; --card:#0c1a30; --borda:rgba(14,165,233,.16); --borda-forte:rgba(148,163,184,.28);
  --texto:#F8FAFF; --texto2:#E2E8F0; --mudo:#94A3B8; --fraco:#64748b;
  --cor:#0EA5E9; --cor-esc:#38BDF8; --cor-suave:rgba(14,165,233,.14); --cor-txt:#071525;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --ok:#6EE7B7; --ok-bg:rgba(16,185,129,.16); --ok-forte:#10B981;
  --aten:#FCD34D; --aten-bg:rgba(245,158,11,.16); --aten-forte:#F59E0B;
  --ruim:#FCA5A5; --ruim-bg:rgba(239,68,68,.16); --ruim-forte:#EF4444;
  --neutro-bg:rgba(148,163,184,.14); --cab:rgba(14,165,233,.05); --hover:rgba(14,165,233,.06);
  --roxo:#A78BFA; --roxo-bg:rgba(124,58,237,.16);
  --tip-bg:#0b1d33; --tip-fg:#F8FAFF; --sombra-tip:rgba(0,0,0,.45);
  --grade:rgba(14,165,233,.04);
  --bg-input:rgba(255,255,255,.04);
  --veu:rgba(2,8,20,.78);       /* fundo escurecido atrás de modais */
  --sombra-cartao:0 8px 40px rgba(0,0,0,.4);   /* cartão das telas de login */
  --brilho:0 0 30px rgba(14,165,233,.4);        /* brilho do logo no escuro */
}
html[data-tema="claro"] {
  --teal:#465dd1; --lteal:#3545a3; --green:#059669; --orange:#d97706; --red:#dc2626;
  --white:#1f2937; --gray:#6b7280; --dark:#f5f6fa;
  --bg:#f5f6fa; --card:#ffffff; --borda:#eef0f4; --borda-forte:#e5e7eb;
  --texto:#1f2937; --texto2:#374151; --mudo:#6b7280; --fraco:#9ca3af;
  --cor:#465dd1; --cor-esc:#3545a3; --cor-suave:rgba(70,93,209,.08); --cor-txt:#ffffff;
  --sombra:0 1px 2px rgba(17,24,39,.04),0 8px 24px rgba(17,24,39,.04);
  --ok:#166534; --ok-bg:#dcfce7; --ok-forte:#059669;
  --aten:#92400e; --aten-bg:#fef3c7; --aten-forte:#f59e0b;
  --ruim:#991b1b; --ruim-bg:#fee2e2; --ruim-forte:#dc2626;
  --neutro-bg:#f3f4f6; --cab:#fafbfc; --hover:#fafbff;
  --roxo:#6d28d9; --roxo-bg:#ede9fe;
  --tip-bg:#1f2937; --tip-fg:#ffffff; --sombra-tip:rgba(31,41,55,.18);
  --grade:transparent;
  --bg-input:#ffffff;
  --veu:rgba(17,24,39,.55);
  --sombra-cartao:0 1px 2px rgba(17,24,39,.04),0 10px 30px rgba(17,24,39,.08);
  --brilho:none;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { background:var(--bg); }
html { font-family:Inter,system-ui,sans-serif; }   /* telas soltas herdam daqui (font-family:inherit) */
body { font-family:Inter,system-ui,sans-serif; color:var(--texto); min-height:100vh; }
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grade) 1px, transparent 1px),linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size:40px 40px;
}
a { color:var(--cor); }
.mono { font-family:'DM Mono',monospace; }

/* ── Estrutura ── */
.layout { position:relative; z-index:1; display:flex; flex-wrap:wrap; min-height:100vh; }
/* Barra lateral como no Zenith: recolhida (5rem, só ícones) e expande para 16rem
   ao passar o mouse, POR CIMA do conteúdo, sem empurrar a página. Rolagem só
   quando aberta. No celular vira menu de tela cheia (ver mídia abaixo). */
.aside {
  background:var(--card); border-right:1px solid var(--borda);
  padding:1.1rem .75rem; display:flex; flex-direction:column; gap:.25rem;
  position:fixed; top:0; left:0; bottom:0; width:5rem; z-index:45;
  overflow:hidden; transition:width .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.aside:hover { width:16rem; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--borda-forte) transparent; box-shadow:12px 0 32px -12px rgba(0,0,0,.35); }
.aside .rot, .aside .marca-txt, .aside .escopo, .aside .nav-grupo, .aside .usuario > div, .aside .usuario .btn-detalhe { white-space:nowrap; }
.aside:not(:hover) .rot, .aside:not(:hover) .marca-txt, .aside:not(:hover) .escopo,
.aside:not(:hover) .usuario > div, .aside:not(:hover) .usuario .btn-detalhe { display:none; }
.aside:not(:hover) .nav-grupo { height:1px; padding:0; margin:.6rem .4rem; background:var(--borda); overflow:hidden; color:transparent; }
.aside:not(:hover) .nav-grupo:first-child { display:none; }
.aside:not(:hover) .nav a { justify-content:center; padding:.6rem 0; }
.aside:not(:hover) .nav a svg { width:1.25rem; height:1.25rem; }
.aside:not(:hover) .marca { justify-content:center; padding:.3rem 0 1rem; }
.aside:not(:hover) .tema-btn { padding:0; border-color:transparent; background:transparent; align-self:center; }
.aside:not(:hover) .usuario { justify-content:center; }
.aside:not(:hover) .aside-rodape { padding-left:0; padding-right:0; align-items:center; }
.principal { flex:999 1 560px; min-width:0; margin-left:5rem; padding:1.5rem 1.75rem 2.5rem; display:flex; flex-direction:column; gap:1.25rem; }
.topo-mobile { display:none; }

/* Marca */
.marca { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--texto); padding:.3rem .8rem 1rem; }
.marca-ic { width:2.1rem; height:2.1rem; border-radius:.65rem; background:var(--cor); color:var(--cor-txt); display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.marca-txt { font-weight:700; font-size:1.05rem; }
.marca-txt span { color:var(--cor); }

/* Escopo (tenant / localidade / papel) no topo do menu */
.escopo { display:flex; flex-wrap:wrap; gap:.35rem; padding:0 .8rem .6rem; }
.selo { display:inline-flex; align-items:center; gap:.3rem; border-radius:9999px; padding:.2rem .6rem; font-size:.7rem; font-weight:600; white-space:nowrap; background:var(--cor-suave); color:var(--cor-esc); text-decoration:none; border:1px solid transparent; }
.selo-loc { background:var(--ok-bg); color:var(--ok); }
.selo-papel { background:var(--aten-bg); color:var(--aten); }
.selo-roxo { background:var(--roxo-bg); color:var(--roxo); }
button.selo { font:inherit; font-size:.7rem; font-weight:600; cursor:pointer; background:transparent; color:var(--cor); border-color:var(--borda-forte); }
button.selo:hover { border-color:var(--cor); background:var(--cor-suave); }

/* Navegação */
.nav { display:flex; flex-direction:column; gap:.15rem; }
.nav a { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:.75rem; color:var(--texto2); text-decoration:none; font-size:.86rem; font-weight:500; }
.nav a:hover { background:var(--cor-suave); color:var(--cor-esc); }
.nav a[aria-current="page"] { background:var(--cor); color:var(--cor-txt); font-weight:600; }
.nav a svg { width:1.1rem; height:1.1rem; flex-shrink:0; }
.nav-grupo { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--fraco); padding:1rem .8rem .35rem; }

/* Rodapé do menu: tema + usuário */
.aside-rodape { margin-top:auto; padding:1rem .8rem 0; border-top:1px solid var(--borda); display:flex; flex-direction:column; gap:.7rem; }
.tema-btn { display:inline-flex; align-items:center; gap:.4rem; height:2.1rem; padding:0 .3rem 0 .7rem; border-radius:999px; border:1px solid var(--borda-forte); background:var(--card); color:var(--texto2); font:inherit; font-size:.74rem; font-weight:600; cursor:pointer; align-self:flex-start; }
.tema-btn i { width:1.5rem; height:1.5rem; border-radius:999px; background:var(--cor); color:var(--cor-txt); display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:.85rem; }
.tema-btn .rot-claro, .tema-btn .ic-sol { display:none; }
html[data-tema="claro"] .tema-btn .rot-claro, html[data-tema="claro"] .tema-btn .ic-sol { display:inline; }
html[data-tema="claro"] .tema-btn .rot-escuro, html[data-tema="claro"] .tema-btn .ic-lua { display:none; }
.usuario { display:flex; align-items:center; gap:.6rem; }
.usuario-av { width:2.1rem; height:2.1rem; border-radius:999px; background:var(--cor-suave); color:var(--cor-esc); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; text-transform:uppercase; }
.usuario-nome { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usuario-sub { font-size:.7rem; color:var(--mudo); }

/* Botões */
.btn { display:inline-flex; align-items:center; gap:.45rem; height:2.5rem; padding:0 1rem; border-radius:.75rem; font-size:.875rem; font-weight:600; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; font-family:inherit; }
.btn svg { width:1.05rem; height:1.05rem; }
.btn-sec { background:var(--card); color:var(--texto2); border-color:var(--borda-forte); }
.btn-sec:hover { border-color:var(--cor); color:var(--cor); background:var(--cor-suave); }
.btn-pri { background:var(--cor); color:var(--cor-txt); }
.btn-pri:hover { background:var(--cor-esc); color:var(--cor-txt); }
.btn-ok { background:var(--ok-forte); color:#fff; }
.btn-ok:hover { filter:brightness(.92); color:#fff; }
.btn-detalhe { display:inline-flex; align-items:center; gap:.35rem; height:2rem; padding:0 .7rem; border-radius:.6rem; border:1px solid var(--borda-forte); background:var(--card); color:var(--texto2); font-size:.78rem; font-weight:600; text-decoration:none; cursor:pointer; font-family:inherit; white-space:nowrap; }
.btn-detalhe:hover { border-color:var(--cor); color:var(--cor); background:var(--cor-suave); }
.btn-detalhe svg { width:1rem; height:1rem; }
.btn-remover { border-color:rgba(239,68,68,.35); color:var(--ruim-forte); background:transparent; }
.btn-remover:hover { background:var(--ruim-bg); border-color:var(--ruim-forte); color:var(--ruim); }

/* Cabeçalho da página */
.pagina-topo { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; }
.pagina-topo h1 { font-size:1.5rem; font-weight:700; line-height:1.2; }
.pagina-topo p { margin-top:.3rem; font-size:.85rem; color:var(--mudo); }
.pagina-acoes { display:flex; gap:.6rem; flex-wrap:wrap; }

/* Cartões e KPIs */
.card { background:var(--card); border:1px solid var(--borda); border-radius:1.25rem; box-shadow:var(--sombra); }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.kpi { padding:1rem 1.1rem; }
.kpi-rot { font-size:.75rem; font-weight:600; color:var(--mudo); text-transform:uppercase; letter-spacing:.04em; line-height:1.2; display:flex; align-items:center; }
.kpi-linha { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.kpi-val { font-size:2rem; font-weight:700; color:var(--texto); line-height:1.15; margin-top:.15rem; }
.kpi-sub { font-size:.78rem; color:var(--mudo); }
.kpi-rodape { margin-top:.6rem; font-size:.78rem; color:var(--mudo); }
.barra { display:flex; align-items:center; height:.6rem; border-radius:999px; overflow:hidden; background:var(--neutro-bg); }
.barra i, .barra span { display:block; height:100%; }
.barra-fina { height:.45rem; }

/* Badges (mesma semântica dos antigos .pill / .val-badge) */
.badge { display:inline-flex; align-items:center; gap:.25rem; border-radius:999px; padding:.16rem .5rem; font-size:.66rem; font-weight:700; white-space:nowrap; }
.badge-ok { background:var(--ok-bg); color:var(--ok); }
.badge-aten { background:var(--aten-bg); color:var(--aten); }
.badge-ruim { background:var(--ruim-bg); color:var(--ruim); }
.badge-neutro { background:var(--neutro-bg); color:var(--texto2); }
.badge-cor { background:var(--cor-suave); color:var(--cor-esc); }
.badge-tinta { border:1px solid; }   /* cor vem inline do indicador (item.ergo.color) */
.val-badge { display:inline-flex; align-items:center; margin-left:.35rem; font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.04em; border-radius:10px; padding:.12rem .45rem; vertical-align:middle; white-space:nowrap; }
.val-badge.ok  { background:var(--ok-bg); border:1px solid rgba(16,185,129,.45); color:var(--ok); }
.val-badge.dis { background:var(--aten-bg); border:1px solid rgba(245,158,11,.45); color:var(--aten); }
.val-badge.tempo { background:var(--aten-bg); border:1px solid rgba(245,158,11,.5); color:var(--aten); cursor:help; }

/* Bolinha "?" com legenda ao passar o mouse (sem JS). */
.help { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:.45rem; border-radius:50%; border:1px solid var(--fraco); color:var(--mudo); font:600 .6rem 'DM Mono',monospace; letter-spacing:0; cursor:help; position:relative; vertical-align:middle; text-transform:none; }
.help:hover { color:var(--cor); border-color:var(--cor); }
.help::after { content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); width:max-content; max-width:260px; white-space:normal; text-align:left; background:var(--tip-bg); color:var(--tip-fg); border:1px solid var(--borda); border-radius:8px; padding:.55rem .75rem; font:400 .74rem/1.4 Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; box-shadow:0 10px 28px var(--sombra-tip); opacity:0; pointer-events:none; transition:opacity .15s; z-index:30; }
.help:hover::after { opacity:1; }
/* Escondido, o balão não pode ocupar espaço: com só opacity:0 ele continuava
   posicionado e empurrava a página 59 px para a direita no celular. */
.help:not(:hover):not(:focus)::after { display:none; }
.help:focus::after { opacity:1; }
@media (max-width:760px) { .help::after { max-width:min(260px, calc(100vw - 2rem)); } }
.kpi:first-child .help::after { left:0; transform:none; }
.kpi:last-child .help::after { left:auto; right:0; transform:none; }

/* Duas colunas: tabela + painéis laterais */
/* Coluna lateral estreita (fixa em 270px) para a tabela ter o máximo de espaço. */
.duas { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:.75rem; align-items:start; }
.coluna { display:flex; flex-direction:column; gap:.75rem; min-width:0; }
/* Botão que recolhe a coluna lateral para a tabela ocupar tudo (estado salvo no navegador). */
.lateral-btn { align-self:flex-end; height:1.7rem; padding:0 .55rem; font-size:.7rem; color:var(--mudo); }
.lateral-btn .lat-abrir { display:none; }
html[data-lateral="recolhida"] .duas { grid-template-columns:minmax(0,1fr) 2.4rem; }
html[data-lateral="recolhida"] .coluna > .card { display:none; }
html[data-lateral="recolhida"] .lateral-btn { align-self:stretch; height:auto; min-height:9rem; padding:.7rem .3rem; writing-mode:vertical-rl; transform:rotate(180deg); justify-content:center; }
html[data-lateral="recolhida"] .lateral-btn .lat-fechar { display:none; }
html[data-lateral="recolhida"] .lateral-btn .lat-abrir { display:inline; }
.painel { padding:.9rem 1rem; display:flex; flex-direction:column; gap:.55rem; }
.painel h2 { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--mudo); display:flex; align-items:center; flex-wrap:wrap; gap:.3rem .6rem; }
.painel h2 .hint { margin-left:auto; font-family:'DM Mono',monospace; font-size:.62rem; font-weight:400; text-transform:none; letter-spacing:0; }
.painel ul { list-style:none; display:grid; gap:.3rem; font-size:.8rem; color:var(--texto2); }
.painel li b { font-family:'DM Mono',monospace; }
.painel .n { font-family:'DM Mono',monospace; font-size:.72rem; color:var(--mudo); }
.painel .dica { font-size:.78rem; color:var(--mudo); }
.acao { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.6rem .75rem; border-radius:.85rem; text-decoration:none; font-size:.8rem; font-weight:600; line-height:1.25; }
.acao-ruim { background:var(--ruim-bg); color:var(--ruim); }
.acao-aten { background:var(--aten-bg); color:var(--aten); }
.acao-cor { background:var(--cor-suave); color:var(--cor-esc); }
.acao-ok { background:var(--ok-bg); color:var(--ok); }
.exec-split { font-size:.76rem; color:var(--mudo); margin-left:1.2rem; }
.nps-linha { display:grid; grid-template-columns:42px 1fr 72px; align-items:center; gap:.5rem; font-size:.76rem; color:var(--mudo); }
.nps-linha .barra { height:7px; }
/* NPS em três faixas (28/10/2026): boa 4–5, neutra 3, ruim 1–2. */
.nps-bom { background:var(--ok-forte); }
.nps-neutro { background:var(--fraco); }
.nps-ruim { background:var(--ruim-forte); }
.barra > i.nps-bom, .barra > i.nps-neutro, .barra > i.nps-ruim { display:block; height:100%; }
.nps-faixas { height:.75rem; margin:.15rem 0 .1rem; }
.nps-legenda { display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.74rem; color:var(--mudo); margin-bottom:.35rem; }
.nps-legenda > span { display:inline-flex; align-items:center; gap:.35rem; }
.nps-legenda i { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }
.nps-legenda em { font-style:normal; color:var(--fraco); }
.nps-legenda b { color:var(--texto); }
.nps-linha .v { font-family:'DM Mono',monospace; text-align:right; white-space:nowrap; }
.nps-score { font-size:1.8rem; font-weight:700; }
.seg-todos-ok { background:var(--ok-forte); } .seg-todos-alt { background:var(--cor); } .seg-um { background:var(--aten-forte); } .seg-varios { background:var(--ruim-forte); }

/* Aviso "criado com sucesso" */
.aviso { display:flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:.85rem; font-size:.88rem; background:var(--ok-bg); color:var(--ok); border:1px solid rgba(16,185,129,.3); }

/* Tabela */
.tabela-card { overflow:hidden; min-width:0; }
.tabela-topo { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding:.35rem 1.1rem 0; border-bottom:1px solid var(--borda); }
.abas { display:flex; gap:.25rem; overflow-x:auto; max-width:100%; }
.aba { height:2.75rem; padding:0 .9rem; border:0; background:transparent; font:inherit; font-size:.85rem; font-weight:600; color:var(--mudo); border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; }
.aba[aria-current="page"] { color:var(--cor); border-bottom-color:var(--cor); }
.aba-n { display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.2rem; padding:0 .4rem; margin-left:.4rem; border-radius:999px; background:var(--neutro-bg); color:var(--texto2); font-size:.66rem; font-weight:700; font-family:'DM Mono',monospace; }
.aba[aria-current="page"] .aba-n { background:var(--cor); color:var(--cor-txt); }
.espaco { flex:1 1 auto; }
.busca-linha { display:flex; align-items:center; gap:.5rem; padding-bottom:.35rem; flex:1 1 16rem; }
.busca { position:relative; min-width:0; flex:1 1 12rem; }
.busca svg { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); width:1.05rem; height:1.05rem; color:var(--fraco); pointer-events:none; }
.busca input { height:2.4rem; width:100%; border:1px solid var(--borda-forte); border-radius:.75rem; padding:0 .8rem 0 2.2rem; font:inherit; font-size:.85rem; color:var(--texto); background:var(--card); outline:none; }
.busca input:focus { border-color:var(--cor); }
.btn-filtros { height:2.4rem; padding:0 .8rem; }
.btn-filtros[aria-expanded="true"] { border-color:var(--cor); color:var(--cor); background:var(--cor-suave); }
.filters-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; padding:.85rem 1.1rem; background:var(--cab); border-bottom:1px solid var(--borda); }
.filters-bar[hidden] { display:none; }
.filters-bar select { height:2.4rem; border:1px solid var(--borda-forte); border-radius:.75rem; padding:0 2rem 0 .8rem; font:inherit; font-size:.82rem; font-weight:600; color:var(--texto); background:var(--card); outline:none; min-width:0; }
.filters-bar select:focus { border-color:var(--cor); }
.filters-bar select option { background:var(--card); color:var(--texto); }
.filters-bar button { height:2.4rem; border:0; border-radius:.75rem; background:var(--cor); color:var(--cor-txt); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; padding:0 1rem; }
.tabela-rolagem { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.82rem; min-width:34rem; }
thead th { text-align:left; font-size:.66rem; font-weight:700; color:var(--mudo); text-transform:uppercase; letter-spacing:.04em; padding:.6rem .8rem; border-bottom:1px solid var(--borda); background:var(--cab); white-space:nowrap; }
tbody td { padding:.55rem .8rem; border-bottom:1px solid var(--borda); vertical-align:middle; color:var(--texto); }
tbody td:first-child, thead th:first-child { padding-left:1.1rem; }
tbody td:last-child, thead th:last-child { padding-right:1.1rem; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--hover); }
.user-cell { display:flex; align-items:center; gap:.6rem; min-width:0; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--cor-suave); color:var(--cor-esc); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; flex-shrink:0; text-transform:uppercase; }
.user-name { font-weight:600; color:var(--texto); font-size:.82rem; line-height:1.25; }
.user-cpf { font-size:.68rem; color:var(--mudo); font-family:'DM Mono',monospace; white-space:nowrap; }
.td-mudo { color:var(--mudo); }
.td-acoes { display:flex; gap:.45rem; align-items:center; justify-content:flex-end; }
.td-acoes .btn-detalhe { height:1.8rem; padding:0 .6rem; font-size:.74rem; }
.empty-state { text-align:center; padding:3rem; color:var(--mudo); font-size:.9rem; }
.tabela-rodape { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem 1.1rem; font-size:.8rem; color:var(--mudo); border-top:1px solid var(--borda); }
.tabela-rodape b { color:var(--texto); }
.filter-meta a { color:var(--cor); }
.pager { display:flex; flex-wrap:wrap; gap:.3rem; }
.pager .pg { display:inline-flex; align-items:center; height:2rem; padding:0 .7rem; border-radius:.6rem; border:1px solid var(--borda-forte); background:var(--card); color:var(--texto2); font-size:.78rem; font-weight:600; text-decoration:none; }
.pager a.pg:hover { border-color:var(--cor); color:var(--cor); }
.pager .pg.atual { background:var(--cor); color:var(--cor-txt); border-color:var(--cor); }
.pager .pg.off { opacity:.4; }
.pager .pg.dots { border:none; background:transparent; }

/* ── Responsivo ── */
@media (max-width:1024px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .duas { grid-template-columns:1fr !important; } .lateral-btn { display:none; } html[data-lateral="recolhida"] .coluna > .card { display:flex; } .filters-bar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .topo-mobile { display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:var(--card); border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:5; width:100%; }
  .topo-mobile .marca-txt { font-size:1rem; }
  .aside { display:none; position:static; width:auto; flex-basis:100%; border-right:0; border-bottom:1px solid var(--borda); overflow:visible; box-shadow:none; transition:none; padding:1.1rem .9rem; }
  .aside .rot, .aside .marca-txt, .aside .escopo, .aside .usuario > div, .aside .usuario .btn-detalhe { display:revert !important; }
  .aside .nav-grupo { height:auto !important; padding:1rem .8rem .35rem !important; margin:0 !important; background:none !important; color:var(--fraco) !important; }
  .aside .nav a { justify-content:flex-start !important; padding:.6rem .8rem !important; }
  .aside .marca { justify-content:flex-start !important; }
  .aside .tema-btn { padding:0 .3rem 0 .7rem !important; border-color:var(--borda-forte) !important; background:var(--card) !important; align-self:flex-start !important; }
  .aside .usuario { justify-content:flex-start !important; }
  .aside .aside-rodape { padding:1rem .8rem 0 !important; align-items:stretch !important; }
  .principal { margin-left:0; }
  html[data-menu="aberto"] .aside { display:flex; }
  .so-desktop { display:none !important; }
  .principal { padding:1rem 1rem 3rem; gap:1rem; }
  .kpi-val { font-size:1.5rem; }
  .pagina-topo h1 { font-size:1.25rem; }
  .filters-bar { grid-template-columns:1fr; }
  .abas { -webkit-overflow-scrolling:touch; }
  table { min-width:30rem; font-size:.78rem; }
  thead th { padding:.5rem .6rem; }
  tbody td { padding:.45rem .6rem; }
  .val-badge { margin-left:.2rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Componentes compartilhados pelas demais telas do painel (formulários,
   títulos, avisos). As cores vêm das variáveis acima, nos dois temas.
   ══════════════════════════════════════════════════════════════════ */
.pagina-sub { font-size:.88rem; color:var(--mudo); margin:-.6rem 0 .2rem; }
.estreita { max-width:620px; margin:0 auto; width:100%; }   /* centralizado, como as demais telas */
.media { max-width:900px; margin:0 auto; width:100%; }
.form-card { background:var(--card); border:1px solid var(--borda); border-radius:1.25rem; box-shadow:var(--sombra); overflow:hidden; }
.form-card-header { padding:.9rem 1.4rem; border-bottom:1px solid var(--borda); font-size:.72rem; font-weight:700; color:var(--mudo); letter-spacing:.06em; text-transform:uppercase; background:var(--cab); }
.form-body { padding:1.4rem; }
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.72rem; font-weight:600; color:var(--mudo); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.4rem; }
.form-input, .form-select, .form-textarea {
  width:100%; background:var(--bg-input, var(--card)); border:1px solid var(--borda-forte); border-radius:.75rem;
  padding:.65rem .9rem; color:var(--texto); font:inherit; font-size:.9rem; outline:none; transition:border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--cor); }
.form-input[type=file] { padding:.5rem .8rem; font-size:.82rem; }
.form-select option { background:var(--card); color:var(--texto); }
.form-hint { font-size:.72rem; color:var(--mudo); margin-top:.3rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:760px) { .form-grid { grid-template-columns:1fr; } }
.opcoes { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:.5rem; }
.opcao {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; text-align:center;
  padding:.8rem .6rem; border:1px solid var(--borda-forte); border-radius:.75rem; background:var(--card);
  font-size:.85rem; color:var(--texto2); cursor:pointer; transition:all .15s;
}
.opcao input { display:none; }
.opcao:hover { border-color:var(--cor); }
.opcao:has(input:checked) { border-color:var(--cor); background:var(--cor-suave); color:var(--cor-esc); }
.opcao small, .opcao .desc { font-size:.68rem; color:var(--mudo); }
.opcao:has(input:checked) small, .opcao:has(input:checked) .desc { color:var(--cor-esc); opacity:.85; }
.check-lista { display:flex; gap:.5rem 1rem; flex-wrap:wrap; }
.check-lista label { display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--texto2); cursor:pointer; }
.aviso-erro { background:var(--ruim-bg); border:1px solid rgba(239,68,68,.3); border-radius:.75rem; padding:.75rem 1rem; font-size:.85rem; color:var(--ruim); margin-bottom:1.1rem; }
.aviso-ok   { background:var(--ok-bg);   border:1px solid rgba(16,185,129,.3); border-radius:.75rem; padding:.75rem 1rem; font-size:.85rem; color:var(--ok);   margin-bottom:1.1rem; }
.aviso-aten { background:var(--aten-bg); border:1px solid rgba(245,158,11,.3); border-radius:.75rem; padding:.75rem 1rem; font-size:.85rem; color:var(--aten); margin-bottom:1.1rem; }
.form-actions { display:flex; gap:.7rem; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--borda); flex-wrap:wrap; }
.form-actions .btn-pri { flex:1; justify-content:center; }
.abas-modo { display:flex; gap:.4rem; margin-bottom:1rem; }
.aba-modo {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.75rem .6rem;
  border:1px solid var(--borda-forte); border-radius:.85rem; background:var(--card); color:var(--mudo);
  text-decoration:none; font-size:.85rem; cursor:pointer; text-align:center; transition:all .15s;
}
.aba-modo small { font-size:.68rem; opacity:.85; }
.aba-modo:hover { border-color:var(--cor); }
.aba-modo.ativo { border-color:var(--cor); background:var(--cor-suave); color:var(--cor-esc); }
.passos { display:grid; gap:.55rem; margin-bottom:1.2rem; }
.passo { display:flex; gap:.7rem; align-items:flex-start; font-size:.84rem; color:var(--mudo); line-height:1.4; }
.passo b { color:var(--texto); }
.passo .n { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--cor-suave); color:var(--cor-esc); display:inline-flex; align-items:center; justify-content:center; font-family:'DM Mono',monospace; font-size:.7rem; font-weight:600; }
.resumo { display:grid; gap:.8rem; margin-bottom:1.2rem; }
.resumo-bloco { border:1px solid var(--borda); border-radius:.85rem; padding:.8rem 1rem; }
.resumo-bloco h3 { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.5rem; font-weight:700; }
.resumo-bloco.ok h3 { color:var(--ok-forte); } .resumo-bloco.pulou h3 { color:var(--aten-forte); } .resumo-bloco.erro h3 { color:var(--ruim-forte); }
.resumo-bloco ul { list-style:none; display:grid; gap:.25rem; font-size:.82rem; color:var(--mudo); }
.resumo-bloco li b { color:var(--texto); }
.resumo-bloco li code { font-family:'DM Mono',monospace; font-size:.76rem; color:var(--cor-esc); }
/* Tabelas simples (contas, localidades, vídeos…) */
.tabela-simples { width:100%; border-collapse:collapse; font-size:.85rem; }
.tabela-simples th { text-align:left; font-size:.68rem; font-weight:700; color:var(--mudo); text-transform:uppercase; letter-spacing:.04em; padding:.7rem 1rem; border-bottom:1px solid var(--borda); background:var(--cab); white-space:nowrap; }
.tabela-simples td { padding:.7rem 1rem; border-bottom:1px solid var(--borda); vertical-align:middle; color:var(--texto); }
.tabela-simples tr:last-child td { border-bottom:none; }
.tabela-simples tr:hover td { background:var(--hover); }
/* Nomes antigos ainda usados por telas não convertidas: mapeiam para a paleta do tema. */
:root { --border:var(--borda); --glass:var(--cor-suave); --navy:var(--card); --mid:var(--borda-forte); }

/* Botão de tema nas telas soltas (login, definir senha): canto superior direito. */
.tema-flutuante { position:fixed; top:1rem; right:1rem; z-index:50; }

/* Telas convertidas: tabelas largas rolam dentro da pagina, nao da janela. */
.pagina { max-width:100%; overflow-x:auto; }
/* Cada tela declara `.pagina { max-width:...; margin:... auto }`. Com margem
   automática dentro da coluna flex o bloco deixa de esticar e passa a medir o
   seu maior conteúdo — a tabela de contas (719 px) virava uma página de 719 px
   no celular e a janela rolava de lado. Largura cheia + min-width:0 devolvem o
   bloco à largura da coluna; o max-width de cada tela continua valendo no
   computador. */
.principal > .pagina { width:100%; min-width:0; box-sizing:border-box; }

/* Campo de arquivo estilizado (o input nativo fica invisível por cima do botão). */
.arquivo { position:relative; display:flex; align-items:center; gap:.7rem; min-height:2.6rem; padding:.3rem .3rem .3rem .3rem; border:1px dashed var(--borda-forte); border-radius:.75rem; background:var(--bg-input, var(--card)); cursor:pointer; transition:border-color .15s, background .15s; }
.arquivo:hover, .arquivo:focus-within { border-color:var(--cor); background:var(--cor-suave); }
.arquivo.tem-arquivo { border-style:solid; border-color:var(--ok-forte); }
.arquivo input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.arquivo-btn { display:inline-flex; align-items:center; gap:.4rem; height:2rem; padding:0 .8rem; border-radius:.6rem; background:var(--cor); color:var(--cor-txt); font-size:.78rem; font-weight:600; white-space:nowrap; pointer-events:none; }
.arquivo-btn svg { width:1rem; height:1rem; }
.arquivo-nome { flex:1; min-width:0; font-size:.82rem; color:var(--mudo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.arquivo.tem-arquivo .arquivo-nome { color:var(--texto); font-weight:600; }