/* ================================================================
   Tema escuro (padrão) — os tokens são redefinidos em [data-tema="claro"]
   ================================================================ */
:root {
  --fundo: #0b0e14;
  --fundo-2: #111622;
  --cartao: #151b29;
  --cartao-2: #1b2233;
  --borda: #232c40;
  --borda-forte: #2f3a54;
  --texto: #e6ebf5;
  --texto-2: #93a0bb;
  --texto-3: #63708c;

  --lateral: #0e1320;
  --lateral-item: #1b2233;
  --topo-fundo: rgba(11, 14, 20, .88);

  --ok: #2ed3a0;
  --ok-fraco: rgba(46, 211, 160, .12);
  --alerta: #f5a623;
  --alerta-fraco: rgba(245, 166, 35, .13);
  --critico: #ff5470;
  --critico-fraco: rgba(255, 84, 112, .13);
  --neutro: #6b7896;
  --neutro-fraco: rgba(107, 120, 150, .13);
  --info: #4a9eff;
  --info-fraco: rgba(74, 158, 255, .13);

  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
  --fonte: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

  --largura-menu: 236px;
  --largura-menu-recolhido: 68px;
}

[data-tema="claro"] {
  /* Fundo levemente azulado: dá contraste com os cartões brancos. */
  --fundo: #e8eef8;
  --fundo-2: #ffffff;
  --cartao: #ffffff;
  --cartao-2: #eef3fb;
  --borda: #d8e0ee;
  --borda-forte: #bcc7db;
  --texto: #171f30;
  --texto-2: #59637a;
  --texto-3: #8a94a8;

  --lateral: #ffffff;
  --lateral-item: #e7edf9;
  --topo-fundo: rgba(232, 238, 248, .9);

  --ok: #12a374;
  --ok-fraco: rgba(18, 163, 116, .11);
  --alerta: #c77700;
  --alerta-fraco: rgba(199, 119, 0, .12);
  --critico: #d92d49;
  --critico-fraco: rgba(217, 45, 73, .1);
  --neutro: #7a8499;
  --neutro-fraco: rgba(122, 132, 153, .12);
  --info: #1f6feb;
  --info-fraco: rgba(31, 111, 235, .1);

  --sombra: 0 1px 2px rgba(23,31,48,.06), 0 6px 20px rgba(23,31,48,.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;   /* piso da interface: nada mais fino que isto */
  -webkit-font-smoothing: antialiased;
  transition: background .18s, color .18s;
}
a { color: var(--info); text-decoration: none; }
button { font-family: inherit; font-size: inherit; font-weight: 500; cursor: pointer; }
input, select, textarea {
  font-family: inherit; font-size: 13px; font-weight: 500;
  background: var(--fundo-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 9px 11px; width: 100%; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--info); }
label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
        color: var(--texto-3); margin-bottom: 5px; font-weight: 700; }
.campo { margin-bottom: 14px; }
svg { flex-shrink: 0; }

/* ---------- Login ---------- */
.tela-login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--cartao-2) 0%, var(--fundo) 60%);
  position: relative;
}
/* A arte de fundo ficou só aqui, na porta de entrada. */
.tela-login::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background-image: url('/textura-escura.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .16; pointer-events: none;
}
[data-tema="claro"] .tela-login::before {
  background-image: url('/textura-clara.jpg');
  opacity: .26;
}
.caixa-login {
  width: 100%; max-width: 380px; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 16px; padding: 32px; box-shadow: var(--sombra);
  position: relative;
}
.caixa-login h1 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.caixa-login p.sub { margin: 0 0 24px; color: var(--texto-2); font-size: 13px; }

/* ================================================================
   Estrutura: barra lateral + conteúdo
   ================================================================ */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--largura-menu);
  flex-shrink: 0;
  background: var(--lateral);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width .18s ease;
}
body.menu-recolhido .lateral { width: var(--largura-menu-recolhido); }

.lateral nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.item-menu {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; color: var(--texto-2);
  padding: 10px 12px; border-radius: var(--raio-p);
  font-weight: 600; text-align: left; width: 100%; white-space: nowrap;
  transition: background .12s, color .12s;
}
.item-menu:hover { background: var(--lateral-item); color: var(--texto); }
.item-menu.ativa { background: var(--lateral-item); color: var(--texto); font-weight: 700; }
.item-menu.ativa svg { color: var(--info); }
.item-menu .rotulo-menu { flex: 1; }
body.menu-recolhido .item-menu { justify-content: center; padding: 11px 0; }
body.menu-recolhido .item-menu .rotulo-menu,
/* Some o espaço reservado ao contador: mesmo vazio, o `gap` do flex o
   considerava e empurrava o sino para fora do eixo dos demais ícones. */
body.menu-recolhido .item-menu .contador-menu,
body.menu-recolhido .item-menu #contadorAlertas { display: none; }

.contador-menu {
  background: var(--critico); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px; min-width: 20px; text-align: center;
}
/* Com o menu recolhido, o próprio sino fica vermelho quando há alerta não lido. */
body.menu-recolhido .item-menu[data-tem-alerta="1"] svg { color: var(--critico); }
body.menu-recolhido .item-menu[data-tem-alerta="1"]:hover svg { color: var(--critico); }
body.menu-recolhido .item-menu { position: relative; }

.lateral-rodape { padding: 12px; }
.btn-recolher {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: none; border: none; color: var(--texto-3);
  padding: 9px; border-radius: var(--raio-p); font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em;
}
.btn-recolher:hover { background: var(--lateral-item); color: var(--texto); }
.btn-recolher svg { transition: transform .18s; }
body.menu-recolhido .btn-recolher svg { transform: rotate(180deg); }
body.menu-recolhido .btn-recolher span { display: none; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px; height: 58px;
  background: var(--topo-fundo); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo h1 {
  font-size: 14px; margin: 0; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap;
}
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------
   Marca da operação — logo + nome, nunca abreviados.
   Com o menu aberto ela mora acima do menu, na lateral.
   Ao recolher, a lateral sai pela esquerda e a marca entra no topo,
   ao lado do título, sempre com o fundo e a divisória da região onde está.
   --------------------------------------------------------------- */
.marca-operacao { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.marca-operacao .nome-app {
  font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

/* Faixa da lateral: guarda a marca (menu aberto) ou o semáforo (recolhido) */
.lateral-marca {
  height: 58px; padding: 0 18px;
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center;
  overflow: hidden; position: relative;
}
.lateral-marca .conteudo-marca {
  transition: opacity .16s ease, transform .22s ease;
}
body.menu-recolhido .lateral-marca { padding: 0; justify-content: center; }
body.menu-recolhido .lateral-marca .conteudo-marca {
  opacity: 0; transform: translateX(-14px); pointer-events: none;
  position: absolute; left: 18px; width: 0;
}

/* Marca no topo — só com o menu recolhido */
.marca-topo {
  max-width: 0; opacity: 0; transform: translateX(-14px);
  overflow: hidden; pointer-events: none;
  transition: max-width .22s ease, opacity .16s ease .06s, transform .22s ease;
}
body.menu-recolhido .marca-topo {
  max-width: 340px; opacity: 1; transform: none; pointer-events: auto;
}

/* ---------- Semáforo: sempre na lateral, antes da divisória ---------- */
.semaforo {
  display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px;
  transition: margin .22s ease;
}
.semaforo .ponto-saude {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 12px var(--ok);
}
/* Menu aberto: encostado na divisória, depois da logo e do nome.
   Menu recolhido: sozinho e centralizado, acima dos ícones. */
.semaforo-lateral { margin-left: auto; }
body.menu-recolhido .semaforo-lateral { margin-left: 0; }

/* ---------- Ícone da página — só com o menu aberto ---------- */
.icone-pagina {
  display: grid; place-items: center; flex-shrink: 0;
  color: var(--info); width: 18px; height: 18px; overflow: hidden;
  transition: max-width .22s ease, opacity .16s ease, transform .22s ease;
  max-width: 18px; opacity: 1;
}
body.menu-recolhido .icone-pagina {
  max-width: 0; width: 0; opacity: 0; transform: translateX(-10px);
}
.emblema {
  position: relative; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; overflow: visible;
}
.emblema img {
  width: 30px; height: 30px; border-radius: 8px; object-fit: contain;
  background: var(--cartao-2); border: 1px solid var(--borda);
}
/* Sem logo, o emblema é um quadrado neutro com a inicial da operação. */
.emblema .sigla-operacao {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--info-fraco); color: var(--info);
  font-weight: 800; font-size: 13px;
  border: 1px solid var(--borda);
}

.divisor-topo { width: 1px; height: 22px; background: var(--borda); flex-shrink: 0; }

main { padding: 24px; max-width: 1600px; width: 100%; margin: 0 auto; flex: 1; }
.pagina { display: none; }
.pagina.ativa { display: block; animation: entrar .18s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

h2.secao { font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
           color: var(--texto-3); margin: 28px 0 12px; font-weight: 700; }
h2.secao:first-child { margin-top: 0; }

/* ---------- Menu do usuário ---------- */
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--info-fraco); color: var(--info);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  border: 1px solid var(--borda-forte); overflow: hidden;
}
.avatar.grande { width: 56px; height: 56px; font-size: 19px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.disparador-usuario {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 1px solid transparent; border-radius: 22px;
  padding: 4px 10px 4px 4px; color: var(--texto);
}
.disparador-usuario:hover { background: var(--cartao); border-color: var(--borda); }
.disparador-usuario .quem { text-align: left; line-height: 1.25; }
.disparador-usuario .quem .n { font-size: 12.5px; font-weight: 600; }
.disparador-usuario .quem .e { font-size: 11px; color: var(--texto-3); }
@media (max-width: 720px) { .disparador-usuario .quem { display: none; } }

.menu-usuario {
  position: absolute; top: 52px; right: 20px; z-index: 90;
  width: 268px; background: var(--cartao); border: 1px solid var(--borda-forte);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden;
  display: none;
}
.menu-usuario.aberto { display: block; animation: entrar .14s ease; }
.menu-usuario .cabecalho { padding: 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--borda); }
.menu-usuario .cabecalho .n { font-weight: 700; font-size: 13.5px; }
.menu-usuario .cabecalho .e { font-size: 11.5px; color: var(--texto-3); word-break: break-all; }
.menu-usuario .lista { padding: 6px; }
.item-usuario {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--texto);
  padding: 9px 11px; border-radius: var(--raio-p); text-align: left; font-size: 13px;
}
.item-usuario:hover { background: var(--cartao-2); }
.item-usuario .atalho { margin-left: auto; font-size: 11px; color: var(--texto-3); }
.divisor { height: 1px; background: var(--borda); margin: 6px 0; }

/* Interruptor de tema */
.balanca {
  margin-left: auto; width: 38px; height: 21px; border-radius: 11px;
  background: var(--borda-forte); position: relative; transition: background .18s; flex-shrink: 0;
}
.balanca::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--cartao); transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-tema="claro"] .balanca { background: var(--info); }
[data-tema="claro"] .balanca::after { transform: translateX(17px); }

/* ---------- Botões ---------- */
.btn {
  background: var(--cartao-2); color: var(--texto); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); padding: 8px 14px; font-weight: 600; transition: .12s;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { background: var(--borda); }
.btn.primario { background: var(--info); border-color: var(--info); color: #fff; font-weight: 700; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.perigo { color: var(--critico); border-color: var(--critico); background: var(--critico-fraco); }
.btn.pequeno { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.kpi {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px 18px; position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--neutro); }
.kpi.ok::before { background: var(--ok); }
.kpi.alerta::before { background: var(--alerta); }
.kpi.critico::before { background: var(--critico); }
.kpi.info::before { background: var(--info); }
.kpi .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); font-weight: 700; }
.kpi .valor { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .detalhe { font-size: 12px; color: var(--texto-2); font-weight: 500; }

/* ---------- Barra de composição ---------- */
.barra-comp { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--fundo-2); margin: 14px 0 10px; }
.barra-comp span { display: block; transition: width .3s; }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--texto-2); }
.legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.painel {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px 20px;
}
.grade-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1000px) { .grade-2 { grid-template-columns: 1fr; } }

/* ---------- Carteira ---------- */
.carteira { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; }
.bloco {
  flex: 0 0 380px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
}
.bloco.critico { border-color: var(--critico); }
.bloco.alerta { border-color: var(--alerta); }

.bloco-topo { padding: 14px 16px; background: var(--cartao-2); border-bottom: 1px solid var(--borda); }
.bloco-topo .linha { display: flex; align-items: center; gap: 8px; }
.bloco-topo h3 { margin: 0; font-size: 15px; font-weight: 800; }
.bloco-topo .desc { color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.bloco-metricas { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--texto-2); }
.bloco-metricas b { color: var(--texto); font-variant-numeric: tabular-nums; }

.bloco-corpo { padding: 14px 16px; }
.rotulo-grupo { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
                color: var(--texto-3); font-weight: 700; margin: 4px 0 8px; }

/* Hierarquia: perfil → BMs do perfil → contas da BM */
.perfil-grupo {
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  margin-bottom: 8px; overflow: hidden; background: var(--fundo-2);
}
.perfil-grupo.critico { border-color: var(--critico); }
.perfil-grupo.alerta { border-color: var(--alerta); }

.perfil {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  cursor: pointer; user-select: none;
}
.perfil:hover { background: var(--cartao-2); }
.perfil .nome { font-weight: 700; font-size: 13px; }
.perfil .tipo { font-size: 11px; color: var(--texto-3); }
.perfil .direita { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.selo-perfil {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--neutro-fraco); color: var(--texto-2); border: 1px solid var(--borda-forte);
}
/* A cor do selo vem do nome da pessoa; a saúde aparece na borda do grupo
   e na etiqueta de status, então não precisa se repetir aqui. */

.perfil-bms { display: none; padding: 4px 12px 12px; border-top: 1px solid var(--borda); }
.perfil-grupo.aberto .perfil-bms { display: block; }
.perfil-grupo.aberto > .perfil .seta { transform: rotate(90deg); }

/* Aninhamento visual: a BM dentro do perfil recua e ganha um fio à esquerda */
.perfil-bms .bm { margin-top: 8px; margin-bottom: 0; background: var(--cartao); }
.perfil-bms .bm .bm-contas .conta { background: var(--fundo-2); }

.bm { border: 1px solid var(--borda); border-radius: var(--raio-p); margin-bottom: 8px; overflow: hidden; background: var(--fundo-2); }
.bm-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; user-select: none; }
.bm-topo:hover { background: var(--cartao-2); }
.selo-bm {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--neutro-fraco); color: var(--texto);
  border: 1px solid var(--borda-forte); flex-shrink: 0;
}
.bm.ok .selo-bm { background: var(--ok-fraco); color: var(--ok); border-color: var(--ok); }
.bm.alerta .selo-bm { background: var(--alerta-fraco); color: var(--alerta); border-color: var(--alerta); }
.bm.critico .selo-bm { background: var(--critico-fraco); color: var(--critico); border-color: var(--critico); }
.bm-info { min-width: 0; flex: 1; }
.bm-info .titulo { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-info .sub { font-size: 11px; color: var(--texto-3); }
.seta { color: var(--texto-3); transition: transform .15s; display: flex; }
.bm.aberta .seta { transform: rotate(90deg); }
.bm-contas { display: none; padding: 4px 12px 12px; border-top: 1px solid var(--borda); }
.bm.aberta .bm-contas { display: block; }

.conta {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-top: 6px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 7px;
}
.conta .nome { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta .meta { font-size: 10.5px; color: var(--texto-3); font-family: var(--mono); }
.conta .direita { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.conta.critico { border-color: var(--critico); }
.conta.alerta { border-color: var(--alerta); }

.vazio { color: var(--texto-3); font-size: 12px; padding: 10px 0; font-style: italic; }

/* ---------- Marcadores ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 20px; text-transform: uppercase; white-space: nowrap;
}
.pill.ok { background: var(--ok-fraco); color: var(--ok); }
.pill.alerta { background: var(--alerta-fraco); color: var(--alerta); }
.pill.critico { background: var(--critico-fraco); color: var(--critico); }
.pill.neutro { background: var(--neutro-fraco); color: var(--texto-2); }
.pill.info { background: var(--info-fraco); color: var(--info); }

.marca-v { color: var(--ok); font-size: 12px; }
.contador-ads { font-size: 10.5px; color: var(--critico); font-weight: 700; }

/* ---------- Eventos ---------- */
.evento { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--borda); align-items: flex-start; }
.evento:last-child { border-bottom: none; }
.evento:hover { background: var(--cartao-2); }
.evento.nao-lido { background: var(--info-fraco); }
.evento .faixa { width: 3px; align-self: stretch; border-radius: 2px; background: var(--neutro); flex-shrink: 0; }
.evento.critico .faixa { background: var(--critico); }
.evento.alto .faixa { background: var(--alerta); }
.evento.medio .faixa { background: var(--alerta); opacity: .6; }
.evento.info .faixa { background: var(--info); }
.evento .corpo { flex: 1; min-width: 0; }
.evento .titulo { font-weight: 600; font-size: 13px; }
.evento .msg { color: var(--texto-2); font-size: 12.5px; margin-top: 3px; font-weight: 500; }
.evento .trilha { font-size: 11px; color: var(--texto-3); margin-top: 5px; font-family: var(--mono); }
.evento .quando { font-size: 11px; color: var(--texto-3); white-space: nowrap; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros select, .filtros input { width: auto; min-width: 150px; }

/* ---------- Tabelas ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
     color: var(--texto-3); padding: 10px 12px; border-bottom: 1px solid var(--borda); font-weight: 700; }
td { padding: 11px 12px; border-bottom: 1px solid var(--borda); font-size: 13px; }
tr:last-child td { border-bottom: none; }

/* ---------- Configurações: sub-seções ---------- */
.config-layout { display: grid; grid-template-columns: 218px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .config-layout { grid-template-columns: 1fr; } }

.config-menu {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 8px; position: sticky; top: 82px;
}
.config-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--texto-2);
  padding: 10px 12px; border-radius: var(--raio-p); text-align: left; font-size: 13px; font-weight: 600;
}
.config-item:hover { background: var(--cartao-2); color: var(--texto); }
.config-item.ativa { background: var(--info-fraco); color: var(--info); font-weight: 600; }
.config-secao { display: none; }
.config-secao.ativa { display: block; animation: entrar .16s ease; }

/* Estado inicial das configurações: nenhuma sub-seção aberta. */
.config-inicio {
  display: grid; place-items: center; text-align: center;
  padding: 70px 30px; background: var(--cartao);
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  color: var(--texto-3);
}
.config-inicio svg { color: var(--texto-3); opacity: .5; margin-bottom: 14px; }
.config-inicio .t { font-size: 15px; font-weight: 600; color: var(--texto-2); margin-bottom: 4px; }

/* ---------- Painel editável: só edita depois de clicar no lápis ---------- */
.cabecalho-painel {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borda);
}
.cabecalho-painel .titulo-painel { font-weight: 600; }
.cabecalho-painel .sub-painel { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.cabecalho-painel .acoes-painel { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

.painel.editavel .rodape-painel { display: none; gap: 8px; margin-top: 18px; }
.painel.editavel.editando .rodape-painel { display: flex; }
.painel.editavel .editar-painel { display: inline-flex; }
.painel.editavel.editando .editar-painel { display: none; }

/* Em modo leitura os campos ficam apagados, deixando claro que não estão editáveis. */
.painel.editavel:not(.editando) input:disabled,
.painel.editavel:not(.editando) select:disabled {
  background: transparent; border-color: transparent; padding-left: 0;
  color: var(--texto); opacity: 1; cursor: default;
}
.painel.editavel:not(.editando) .interruptor input:disabled { opacity: .55; }
.painel.editavel:not(.editando) .dica { display: none; }
.cabecalho-secao { margin-bottom: 16px; display: flex; align-items: flex-start; gap: 12px; }
.cabecalho-secao h3 { margin: 0 0 3px; font-size: 16px; font-weight: 800; }
.cabecalho-secao p { margin: 0; font-size: 12.5px; color: var(--texto-3); }

/* Fechar a sub-seção e voltar à tela inicial das configurações. */
.fechar-secao {
  margin-left: auto; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: var(--critico-fraco); color: var(--critico);
  border: 1.5px solid var(--critico); transition: .13s;
}
.fechar-secao:hover { background: var(--critico); color: #fff; }

/* ---------- Modal ---------- */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(4,6,12,.6); backdrop-filter: blur(3px);
  display: none; place-items: center; z-index: 100; padding: 24px;
}
.fundo-modal.aberto { display: grid; }
.modal {
  background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: 14px;
  width: 100%; max-width: 480px; max-height: 88vh; box-shadow: var(--sombra);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-corpo { overflow-y: auto; flex: 1; min-height: 0; }
.modal.largo { max-width: 620px; }
.modal-topo { padding: 18px 22px; border-bottom: 1px solid var(--borda); display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.modal-topo h3 { margin: 0; font-size: 16px; font-weight: 800; }

/* Fechar: só este botão fecha a janela — clique fora não fecha, de propósito. */
.modal-topo .fechar {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--critico-fraco); color: var(--critico);
  border: 1.5px solid var(--critico);
  padding: 0; transition: .13s;
}
.modal-topo .fechar:hover { background: var(--critico); color: #fff; }
.modal-corpo { padding: 22px; }
.modal-rodape { padding: 16px 22px; border-top: 1px solid var(--borda); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

/* ---------- Avisos ---------- */
.aviso { padding: 10px 14px; border-radius: var(--raio-p); font-size: 13px; margin-bottom: 14px; }
.aviso.erro { background: var(--critico-fraco); color: var(--critico); border: 1px solid var(--critico); }
.aviso.ok { background: var(--ok-fraco); color: var(--ok); border: 1px solid var(--ok); }
.aviso.info { background: var(--info-fraco); color: var(--info); border: 1px solid var(--info); }

.torradeira { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.torrada {
  background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  padding: 12px 16px; font-size: 13px; box-shadow: var(--sombra); animation: entrar .2s ease; max-width: 340px;
}
.torrada.erro { border-color: var(--critico); color: var(--critico); }
.torrada.ok { border-color: var(--ok); color: var(--ok); }

.dica { font-size: 12px; color: var(--texto-3); margin-top: 6px; font-weight: 500; }
.linha-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.interruptor { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.interruptor input { width: auto; }
.interruptor label { margin: 0; text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--texto); font-weight: 500; }

/* Editor de foto no perfil */
.editor-foto { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.editor-foto .acoes { display: flex; flex-direction: column; gap: 6px; }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================================================================
   Carteira em mapa mental (pan + zoom infinito)
   ================================================================ */
.seletor-visao { display: flex; gap: 2px; background: var(--cartao-2); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 3px; }
.seletor-visao button {
  background: none; border: none; color: var(--texto-2);
  padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.seletor-visao button.ativa { background: var(--cartao); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }

.palco {
  position: relative; height: calc(100vh - 190px); min-height: 460px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; cursor: grab; touch-action: none;
}
.palco.arrastando { cursor: grabbing; }
.palco::before {
  /* malha de pontos, como nas ferramentas de quadro branco */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--borda) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5; pointer-events: none;
}

/* Nitidez no zoom: em repouso o mapa NÃO é uma camada promovida, então o
   navegador repinta o texto na escala real em vez de esticar um bitmap
   já rasterizado. `will-change` entra só durante o arrasto, pela fluidez,
   e sai logo depois — é a saída dela que devolve o texto nítido. */
.mundo {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  will-change: auto;
  backface-visibility: hidden;
}
.mundo.movendo { will-change: transform; }

.mundo .no {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
.mundo svg.fios { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.mundo svg.fios path { fill: none; stroke: var(--borda-forte); stroke-width: 2; }
.mundo svg.fios path.ok { stroke: var(--ok); opacity: .55; }
.mundo svg.fios path.alerta { stroke: var(--alerta); opacity: .7; }
.mundo svg.fios path.critico { stroke: var(--critico); opacity: .75; }

.no {
  position: absolute; box-sizing: border-box;
  background: var(--fundo-2); border: 1.5px solid var(--borda);
  border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 9px;
  box-shadow: var(--sombra); user-select: none;
}
.no.ok { border-color: var(--ok); }
.no.alerta { border-color: var(--alerta); }
.no.critico { border-color: var(--critico); }
.no .no-texto { min-width: 0; flex: 1; }
.no .no-titulo { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no .no-sub { font-size: 11px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.no.nivel-bloco { background: var(--cartao-2); border-width: 2px; }
.no.nivel-bloco .no-titulo { font-size: 14.5px; font-weight: 700; }

.no .selo-no {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
  background: var(--neutro-fraco); color: var(--texto-2); border: 1px solid var(--borda-forte);
}
.no.ok .selo-no { background: var(--ok-fraco); color: var(--ok); border-color: var(--ok); }
.no.alerta .selo-no { background: var(--alerta-fraco); color: var(--alerta); border-color: var(--alerta); }
.no.critico .selo-no { background: var(--critico-fraco); color: var(--critico); border-color: var(--critico); }
.no.nivel-perfil .selo-no { border-radius: 50%; }

/* Botão redondo de abrir/fechar os filhos, na borda direita do nó */
.no .expandir {
  position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cartao); border: 1.5px solid var(--borda-forte);
  color: var(--texto-2); display: grid; place-items: center;
  font-size: 13px; font-weight: 700; line-height: 1; padding: 0;
}
.no .expandir:hover { border-color: var(--info); color: var(--info); }
.no .editar-no {
  background: none; border: none; color: var(--texto-3); padding: 2px; display: grid; place-items: center;
}
.no .editar-no:hover { color: var(--info); }

.controles-mapa {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--cartao); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); padding: 6px; box-shadow: var(--sombra);
}
.controles-mapa button {
  width: 32px; height: 32px; border-radius: 6px; border: none;
  background: none; color: var(--texto-2); display: grid; place-items: center; font-size: 15px;
}
.controles-mapa button:hover { background: var(--cartao-2); color: var(--texto); }
.nivel-zoom {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  padding: 5px 11px; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.dica-mapa {
  position: absolute; left: 14px; top: 14px; z-index: 5;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 6px 11px; font-size: 11.5px; color: var(--texto-3);
}

/* ---------- Personalizar o dashboard ---------- */
.grupo-widgets { margin-bottom: 18px; }
.grupo-widgets .titulo-grupo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-3); font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.grupo-widgets .titulo-grupo button {
  margin-left: auto; background: none; border: none; color: var(--info);
  font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0;
}
.item-widget {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--borda); border-radius: var(--raio-p); margin-bottom: 5px;
  background: var(--fundo-2); cursor: pointer;
}
.item-widget:hover { border-color: var(--borda-forte); }
.item-widget input { width: auto; flex-shrink: 0; }
.item-widget .rot { font-size: 13px; font-weight: 500; }
.item-widget .des { font-size: 11px; color: var(--texto-3); }

.aviso-vazio-dash {
  padding: 50px 30px; text-align: center; color: var(--texto-3);
  background: var(--cartao); border: 1px dashed var(--borda-forte); border-radius: var(--raio);
}

/* ---------- Gráfico de pizza da composição ---------- */
.pizza-comp { display: flex; align-items: center; justify-content: center; padding: 14px 0 6px; }
.pizza-comp svg { max-width: 100%; height: auto; }
.pizza-comp path { stroke: var(--cartao); stroke-width: 2; transition: opacity .12s; }
.pizza-comp path:hover { opacity: .82; }
.pizza-comp .rotulo-fatia { font-size: 11px; font-weight: 700; fill: #fff; pointer-events: none; }

/* Prévia da logo nas configurações */
.emblema-previa {
  width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--cartao-2); border: 1px solid var(--borda-forte);
  color: var(--texto-3); font-size: 11px; text-align: center;
}
.emblema-previa img { width: 100%; height: 100%; object-fit: contain; }

/* Linha fina separando os blocos de conteúdo do dashboard */
.divisor-secao {
  border: none; height: 1px; background: var(--borda);
  margin: 30px 0 4px;
}

/* ---------- Sincronização agrupada por bloco ---------- */
.linha-bloco td {
  background: var(--cartao-2);
  font-weight: 700; font-size: 12.5px;
  border-top: 1px solid var(--borda-forte);
}
.linha-bloco .info-bloco { display: flex; align-items: center; gap: 10px; }
.linha-bloco .resumo-conexao { font-weight: 500; color: var(--texto-3); font-size: 11.5px; }
.linha-perfil td {
  padding-top: 12px; padding-bottom: 4px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-3); font-weight: 700; border-bottom: none;
}
.linha-bm td:first-child { padding-left: 26px; }
.linha-bm td { border-bottom: 1px solid var(--borda); }

/* ================================================================
   Cofre de acessos
   ================================================================ */
.tabela-acessos { min-width: 1500px; }
.tabela-acessos th { white-space: nowrap; }
.tabela-acessos td { vertical-align: middle; white-space: nowrap; }
.tabela-acessos tr:hover td { background: var(--cartao-2); }

.tabela-acessos .celula-perfil { min-width: 190px; }
.tabela-acessos .numero-perfil {
  display: inline-block; min-width: 22px; text-align: center;
  font-size: 10.5px; font-weight: 700; color: var(--texto-3);
  border: 1px solid var(--borda); border-radius: 5px; padding: 0 4px; margin-right: 7px;
}
.tabela-acessos .nome-perfil { font-weight: 700; }
.tabela-acessos .bloco-perfil { font-size: 11px; color: var(--texto-3); margin-top: 1px; }

/* Campo com segredo: mostra pontinhos até alguém revelar */
.segredo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px;
  max-width: 210px;
}
.segredo .valor {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto-2); letter-spacing: .04em;
}
.segredo.revelado .valor { color: var(--texto); user-select: all; }
.segredo .vazio-segredo { color: var(--texto-3); font-style: italic; font-family: var(--fonte); font-size: 12px; }

.botao-icone {
  background: none; border: none; color: var(--texto-3);
  padding: 3px; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0;
}
.botao-icone:hover { background: var(--cartao-2); color: var(--info); }
.botao-icone.ativo { color: var(--info); }

.texto-copiavel {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 200px;
}
.texto-copiavel span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px;
}
.tabela-acessos .vazio-celula { color: var(--texto-3); font-size: 12px; }

/* Bloco de campos no formulário do cofre */
.grupo-campos {
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 14px; margin-bottom: 14px;
}
.grupo-campos .titulo-campos {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-3); font-weight: 700; margin-bottom: 12px;
}
.campo-com-olho { position: relative; }
.campo-com-olho input { padding-right: 38px; }
.campo-com-olho .botao-icone {
  position: absolute; right: 6px; top: 24px;
}

/* Controle de verificação: mesma pegada da tabela do cofre */
.tabela-verificacoes { min-width: 1600px; }
.tabela-verificacoes th { white-space: nowrap; }
.tabela-verificacoes td { vertical-align: middle; white-space: nowrap; }
.tabela-verificacoes tr:hover td { background: var(--cartao-2); }
.tabela-verificacoes .texto-copiavel { max-width: 220px; }
.tabela-verificacoes a { text-decoration: none; }
.tabela-verificacoes a:hover { text-decoration: underline; }

/* ================================================================
   Copiar clicando: vale para qualquer informação da tela
   ================================================================ */
.copiavel {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 240px; cursor: pointer; border-radius: 5px;
  padding: 2px 5px; margin: -2px -5px;
  transition: background .12s, color .12s;
}
.copiavel .conteudo {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copiavel .icone-copia {
  opacity: 0; flex-shrink: 0; color: var(--texto-3);
  transition: opacity .12s, color .12s;
}
.copiavel:hover { background: var(--info-fraco); color: var(--info); }
.copiavel:hover .icone-copia { opacity: 1; color: var(--info); }

/* Confirmação rápida no próprio campo, além do aviso no canto */
.copiavel.copiado { background: var(--ok-fraco); color: var(--ok); }
.copiavel.copiado .icone-copia { opacity: 1; color: var(--ok); }

/* Link: o texto copia, e a setinha ao lado abre em outra aba */
.abrir-link {
  flex-shrink: 0; color: var(--texto-3); display: grid; place-items: center;
  padding: 2px; border-radius: 4px; opacity: 0; transition: opacity .12s;
}
.celula-link:hover .abrir-link { opacity: 1; }
.abrir-link:hover { color: var(--info); background: var(--cartao-2); }
.celula-link { display: inline-flex; align-items: center; gap: 2px; max-width: 260px; }

.segredo.revelado .conteudo { user-select: all; }

/* ================================================================
   Seleção de bloco: a porta de entrada de Acessos e Verificações
   ================================================================ */
.cabecalho-selecao { text-align: center; margin: 18px 0 26px; }
.cabecalho-selecao h3 { margin: 0 0 5px; font-size: 19px; font-weight: 800; }
.cabecalho-selecao p { margin: 0; font-size: 13px; color: var(--texto-3); }

.grade-blocos {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  max-width: 1100px; margin: 0 auto;
}

.cartao-bloco {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 26px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  cursor: pointer; transition: border-color .14s, transform .14s, box-shadow .14s;
  min-height: 168px; justify-content: center; gap: 4px;
}
.cartao-bloco:hover {
  border-color: var(--info); transform: translateY(-2px); box-shadow: var(--sombra);
}
.cartao-bloco .icone-bloco {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px;
  display: grid; place-items: center;
  background: var(--info-fraco); color: var(--info);
  font-weight: 800; font-size: 15px;
}
.cartao-bloco .nome-bloco { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.cartao-bloco .desc-bloco { font-size: 12px; color: var(--texto-3); font-weight: 500; }
.cartao-bloco .contagem { margin-top: 10px; font-size: 12.5px; color: var(--texto-2); }
.cartao-bloco .contagem b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* Cartão dos registros que ainda não pertencem a bloco nenhum */
.cartao-bloco.sem-bloco { border-style: dashed; }
.cartao-bloco.sem-bloco .icone-bloco { background: var(--neutro-fraco); color: var(--texto-3); }

.barra-voltar {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--borda);
}
.nome-bloco-atual { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }

/* ================================================================
   Rodapé
   ================================================================ */
.rodape {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 20px 24px; margin-top: 10px;
  border-top: 1px solid var(--borda);
  font-size: 12.5px; color: var(--texto-3); font-weight: 500;
  flex-wrap: wrap;
}
.rodape .nome-rodape { color: var(--texto-2); font-weight: 700; letter-spacing: -.01em; }
.rodape .ponto-separador { color: var(--borda-forte); }
.rodape .ano-rodape { margin-left: 4px; }

.emblema-rodape {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--info-fraco); color: var(--info);
  font-size: 10px; font-weight: 800;
}
.emblema-rodape img { width: 100%; height: 100%; object-fit: contain; }

/* Títulos de cartão e de painel: mesma caixa alta dos títulos de seção */
.titulo-cartao, .cabecalho-painel .titulo-painel {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--texto-2); margin-bottom: 3px;
}
.cabecalho-painel .sub-painel, .titulo-cartao + div { font-weight: 500; }

/* ================================================================
   Textura de fundo: ícones do mercado digital, bem apagados.
   Fica atrás de tudo; cabeçalho, menu lateral e cartões têm fundo
   próprio e cobrem a textura, então ela só aparece nos respiros.
   ================================================================ */
/* Degradê de leve, do topo ao fim da área de conteúdo. */
main {
  background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
}
[data-tema="claro"] main {
  background-image: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%);
}

/* O conteúdo fica acima da textura */
.app, .tela-login { position: relative; z-index: 1; }


/* ---------- Marca na tela de login ---------- */
.marca-login { text-align: center; margin-bottom: 26px; }
.emblema-login {
  width: 62px; height: 62px; border-radius: 16px; margin: 0 auto 14px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--info-fraco); color: var(--info);
  font-size: 26px; font-weight: 800;
  border: 1px solid var(--borda);
}
.emblema-login img { width: 100%; height: 100%; object-fit: contain; }
.nome-login { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.boas-vindas { font-size: 13.5px; color: var(--texto-2); margin-top: 5px; font-weight: 500; }

.rodape-login {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-3); text-align: center; font-weight: 500;
}


/* Assunto que pertence a uma seção maior, separado por um respiro */
.sub-bloco-config { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--borda); }

/* ---------- Alternar tema: sol quando está escuro, lua quando está claro ---------- */
.btn-tema-login {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: var(--fundo-2); color: var(--texto-3);
  border: 1px solid var(--borda);
  transition: color .14s, border-color .14s, background .14s, transform .18s;
}
.btn-tema-login:hover {
  color: var(--info); border-color: var(--info);
  background: var(--info-fraco); transform: rotate(-20deg);
}

/* Só um dos dois ícones aparece por vez: o que leva ao outro tema. */
.icone-sol, .icone-lua { grid-area: 1 / 1; transition: opacity .16s, transform .22s; }
.icone-lua { opacity: 0; transform: rotate(-40deg) scale(.7); }
[data-tema="claro"] .icone-sol { opacity: 0; transform: rotate(40deg) scale(.7); }
[data-tema="claro"] .icone-lua { opacity: 1; transform: none; }

/* O mesmo par de ícones no menu do usuário, dentro do painel */
#btnTema .par-sol-lua { display: grid; place-items: center; width: 16px; height: 16px; }

/* ---------- Dispositivos conectados ---------- */
.dispositivo {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 7px;
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio-p);
}
.dispositivo.atual { border-color: var(--ok); background: var(--ok-fraco); }
.icone-dispositivo {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--cartao-2); color: var(--texto-2); border: 1px solid var(--borda);
}
.dispositivo.atual .icone-dispositivo { color: var(--ok); border-color: var(--ok); }
.nome-dispositivo { font-size: 13px; font-weight: 700; }
.detalhe-dispositivo { font-size: 11px; color: var(--texto-3); margin-top: 1px; }

/* ---------- Sanfona: um assunto aberto por vez ---------- */
.secao-sanfona {
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  margin-bottom: 8px; overflow: hidden; background: var(--fundo-2);
}
.cabecalho-sanfona {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 14px; background: none; border: none;
  color: var(--texto); text-align: left;
}
.cabecalho-sanfona:hover { background: var(--cartao-2); }
.seta-sanfona { display: grid; place-items: center; color: var(--texto-3); transition: transform .16s; }
.secao-sanfona.aberta .seta-sanfona { transform: rotate(90deg); color: var(--info); }
.texto-sanfona { display: block; min-width: 0; flex: 1; }
.titulo-sanfona { display: block; font-size: 13.5px; font-weight: 700; }
.resumo-sanfona {
  display: block; font-size: 11.5px; color: var(--texto-3); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.corpo-sanfona { display: none; padding: 4px 14px 16px; border-top: 1px solid var(--borda); }
.secao-sanfona.aberta .corpo-sanfona { display: block; animation: entrar .16s ease; }
.corpo-sanfona .campo:first-child { margin-top: 14px; }

/* Histórico de alterações da conta, visto pelo administrador */
.linha-alteracao {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--borda);
}
.linha-alteracao:last-child { border-bottom: none; }
.linha-alteracao .quando-alteracao { margin-left: auto; color: var(--texto-3); font-size: 11px; white-space: nowrap; }
.marca-alterado { font-size: 10.5px; color: var(--alerta); font-weight: 700; }

/* ---------- A ficha aberta ---------- */
.conteudo-ficha {
  font-size: 14px; line-height: 1.75; white-space: pre-wrap;
  color: var(--texto); font-weight: 500;
}
.tags-ficha { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag-ficha {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--cartao-2); color: var(--texto-2); border: 1px solid var(--borda);
}
.rodape-ficha {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda);
  font-size: 11.5px; color: var(--texto-3);
}

/* ---------- Editor de conteúdo rico das fichas ---------- */
.editor-rico {
  min-height: 220px; max-height: 420px; overflow-y: auto;
  line-height: 1.6;
  background: var(--fundo-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 12px 14px; font-size: 13.5px; font-weight: 500;
  outline: none;
}
.editor-rico:focus { border-color: var(--info); }
.editor-rico:empty::before {
  content: attr(data-vazio); color: var(--texto-3); pointer-events: none;
}
.barra-editor {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
  padding: 6px; background: var(--cartao-2);
  border: 1px solid var(--borda); border-radius: var(--raio-p);
}
.barra-editor button {
  min-width: 30px; height: 28px; padding: 0 8px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--texto-2); font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}
.barra-editor button:hover { background: var(--fundo-2); color: var(--info); border-color: var(--borda); }
.barra-editor .separador-editor { width: 1px; background: var(--borda); margin: 2px 4px; }

/* O conteúdo, tanto no editor quanto na ficha aberta */
.editor-rico img, .conteudo-ficha img {
  max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0;
  border: 1px solid var(--borda);
}
.editor-rico ul, .conteudo-ficha ul,
.editor-rico ol, .conteudo-ficha ol { padding-left: 22px; margin: 6px 0 10px; }
.editor-rico li, .conteudo-ficha li { margin-bottom: 3px; line-height: 1.55; }
.editor-rico a, .conteudo-ficha a { text-decoration: underline; }
.editor-rico code, .conteudo-ficha code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--cartao-2); padding: 2px 6px; border-radius: 4px;
}
.editor-rico h3, .conteudo-ficha h3 { font-size: 14.5px; font-weight: 800; margin: 18px 0 8px; }
.editor-rico h3:first-child, .conteudo-ficha h3:first-child { margin-top: 0; }
.editor-rico blockquote, .conteudo-ficha blockquote {
  border-left: 3px solid var(--info); padding-left: 12px; margin: 10px 0;
  color: var(--texto-2);
}
.conteudo-ficha { font-size: 14px; line-height: 1.6; font-weight: 500; }
.conteudo-ficha p, .conteudo-ficha div { margin: 0 0 8px; }
.conteudo-ficha p:last-child { margin-bottom: 0; }
/* Linha em branco vira só um respiro, não um vão */
.conteudo-ficha p:empty, .conteudo-ficha div:empty { margin: 0; height: 8px; }
.conteudo-ficha br + br { display: none; }

/* ================================================================
   Aprendizados: pastas empilhadas, sobrando só a aba de cada uma
   ================================================================ */
.fichario { position: relative; padding-bottom: 8px; }

.pasta {
  position: relative;
  /* A pasta seguinte sobe por cima desta, deixando à mostra só a aba. */
  margin-bottom: -58px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.pasta:last-child { margin-bottom: 0; }

/* O destaque responde à aba, não à pasta inteira: o corpo fica escondido
   sob a pasta seguinte, e mirar nele daria destaque na pasta errada. */
.pasta:has(.aba-pasta:hover) { transform: translate(14px, -8px); z-index: 5; }

/* A aba acompanha o tamanho do texto, independente das vizinhas */
.aba-pasta {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 88%;
  padding: 8px 18px;
  background: var(--cartao);
  border: 2px solid var(--borda-forte);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  position: relative; z-index: 2;
  transition: border-color .16s;
}
/* Tapa a emenda entre a aba e o corpo, sem encostar nas bordas laterais
   (era o que comia as pontas da aba). */
.aba-pasta::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -2px;
  height: 2px; background: var(--cartao);
}

.corpo-pasta {
  position: relative; margin-top: -2px;
  height: 68px;
  border: 2px solid var(--borda-forte);
  border-radius: 0 12px 12px 12px;
  background: var(--cartao);
  transition: border-color .16s, box-shadow .16s;
}

.pasta:has(.aba-pasta:hover) .aba-pasta,
.pasta:has(.aba-pasta:hover) .corpo-pasta { border-color: var(--info); }
.pasta:has(.aba-pasta:hover) .corpo-pasta { box-shadow: var(--sombra); }

/* Só o nome da categoria é colorido; a aba fica neutra. */
.cat-pasta {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  flex-shrink: 0; color: var(--texto-3);
}
.titulo-pasta {
  font-size: 14px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pasta[data-cat="meta"] .cat-pasta        { color: #4a9eff; }
.pasta[data-cat="contas"] .cat-pasta      { color: #2ed3a0; }
.pasta[data-cat="perfis"] .cat-pasta      { color: #a78bfa; }
.pasta[data-cat="criativos"] .cat-pasta   { color: #f5a623; }
.pasta[data-cat="pagamento"] .cat-pasta   { color: #ff5470; }
.pasta[data-cat="verificacao"] .cat-pasta { color: #22d3ee; }
.pasta[data-cat="processo"] .cat-pasta    { color: #94a3b8; }

.fichario-vazio {
  text-align: center; padding: 60px 24px; color: var(--texto-3);
  background: var(--cartao); border: 1px dashed var(--borda-forte); border-radius: var(--raio);
}
.fichario-vazio .t { font-size: 15px; font-weight: 700; color: var(--texto-2); margin-bottom: 6px; }


/* ---------- Cabeçalho da ficha: título, autoria e etiquetas juntos ---------- */
.cabecalho-ficha { flex: 1; min-width: 0; }
.cabecalho-ficha h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; line-height: 1.3; }
.linha-meta-ficha {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 11.5px; color: var(--texto-3); font-weight: 500;
}
.linha-meta-ficha .cat-pasta { font-size: 10.5px; }
.tags-ficha { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tag-ficha {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  background: var(--cartao-2); color: var(--texto-2); border: 1px solid var(--borda);
}
.acoes-ficha { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.editar-no-topo {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: var(--info-fraco); color: var(--info);
  border: 1.5px solid var(--info); transition: .13s;
}
.editar-no-topo:hover { background: var(--info); color: #fff; }

/* A situação real da conta, escrita pela equipe */
.situacao-conta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--info); margin-top: 2px;
}


/* ---------- Cores de identidade dos perfis ---------- */
.selo-perfil.cor-0, .no.nivel-perfil .selo-no.cor-0 { background: rgba(74,158,255,.16);  color: #4a9eff; border-color: #4a9eff; }
.selo-perfil.cor-1, .no.nivel-perfil .selo-no.cor-1 { background: rgba(46,211,160,.16);  color: #2ed3a0; border-color: #2ed3a0; }
.selo-perfil.cor-2, .no.nivel-perfil .selo-no.cor-2 { background: rgba(167,139,250,.18); color: #a78bfa; border-color: #a78bfa; }
.selo-perfil.cor-3, .no.nivel-perfil .selo-no.cor-3 { background: rgba(245,166,35,.16);  color: #f5a623; border-color: #f5a623; }
.selo-perfil.cor-4, .no.nivel-perfil .selo-no.cor-4 { background: rgba(244,114,182,.16); color: #f472b6; border-color: #f472b6; }
.selo-perfil.cor-5, .no.nivel-perfil .selo-no.cor-5 { background: rgba(34,211,238,.16);  color: #22d3ee; border-color: #22d3ee; }
.selo-perfil.cor-6, .no.nivel-perfil .selo-no.cor-6 { background: rgba(250,204,21,.16);  color: #eab308; border-color: #eab308; }
.selo-perfil.cor-7, .no.nivel-perfil .selo-no.cor-7 { background: rgba(248,113,113,.16); color: #f87171; border-color: #f87171; }