/* Terra da Rainha — painel de gestão
   Visual claro: fundo lavanda bem suave, cartões brancos, roxo como cor principal. */

:root {
  --roxo: #6418C3;
  --roxo-escuro: #5212A6;
  --roxo-suave: #F1E9FC;
  --ciano: #3BC4F2;
  --ciano-claro: #74E3F7;
  --rosa: #EE3CD2;
  --rosa-suave: #FDE6F8;
  --azul: #2F80ED;
  --verde: #2BC155;
  --verde-suave: #E3F8EA;
  --laranja: #FFA026;
  --laranja-suave: #FFF3E1;
  --vermelho: #F04438;
  --vermelho-suave: #FEECEB;

  --fundo: #F7F6FB;
  --superficie: #FFFFFF;
  --borda: #EEEDF4;
  --texto: #2E2B3F;
  --texto-2: #6E6B7B;
  --texto-3: #A5A3B6;

  --raio: 12px;
  --raio-sm: 8px;
  --sombra: 0 6px 24px rgba(65, 38, 128, .05);
  --sidebar: 250px;
  --topo: 76px;
  --fonte: 'Titillium Web', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.ico { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Estrutura ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar);
  background: var(--superficie);
  display: flex; flex-direction: column;
  z-index: 30;
  transition: transform .2s ease;
}
.marca {
  height: var(--topo);
  display: flex; align-items: center; gap: 10px;
  padding: 0 22px 0 28px;
}
.marca-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--roxo); color: #fff;
  display: grid; place-items: center;
}
.marca-nome { font-size: 19px; font-weight: 700; letter-spacing: -.2px; line-height: 1; }
.marca-nome small { display: block; font-size: 11px; font-weight: 600; color: var(--texto-3); letter-spacing: .3px; margin-top: 3px; }
.marca .btn-menu { margin-left: auto; }

.btn-menu {
  background: none; border: 0; padding: 6px; cursor: pointer; color: var(--texto); border-radius: 8px;
}
.btn-menu:hover { background: var(--fundo); }

.menu-titulo {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--texto-3); padding: 18px 28px 10px;
}
.menu { list-style: none; margin: 0; padding: 0; }
.menu a {
  position: relative; white-space: nowrap;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 28px;
  color: var(--texto-2); font-weight: 600; font-size: 14px;
}
.menu a .ico { color: #B4B2C4; }
.menu a:hover { color: var(--roxo); }
.menu a:hover .ico { color: var(--roxo); }
.menu a.ativo { color: var(--roxo); }
.menu a.ativo .ico { color: var(--roxo); }
.menu a.ativo::after {
  content: ''; position: absolute; right: 0; top: 6px; bottom: 6px;
  width: 4px; border-radius: 4px 0 0 4px; background: var(--roxo);
}
.menu .contador {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--ciano); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.menu .novo {
  margin-left: auto; padding: 2px 9px; white-space: nowrap; border-radius: 10px;
  background: var(--rosa-suave); color: var(--rosa); font-size: 10px; font-weight: 700; letter-spacing: .5px;
}

.cartao-cta {
  margin: 24px 22px 12px;
  padding: 22px 18px 18px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(140deg, var(--ciano) 0%, var(--ciano-claro) 100%);
  position: relative; overflow: hidden;
}
.cartao-cta::before {
  content: ''; position: absolute; left: 18px; top: 16px; width: 22px; height: 22px;
  background: radial-gradient(circle, rgba(255,255,255,.6) 1.2px, transparent 1.6px) 0 0 / 5.5px 5.5px;
}
.cartao-cta::after {
  content: ''; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,.18);
}
.cartao-cta p { margin: 18px 0 10px; font-size: 15px; font-weight: 700; line-height: 1.35; position: relative; z-index: 1; }
.cartao-cta a { display: inline-flex; position: relative; z-index: 1; }
.sidebar-rodape { margin-top: auto; padding: 16px 28px 22px; font-size: 12px; color: var(--texto-3); line-height: 1.5; }
.sidebar-rodape strong { color: var(--texto-2); font-weight: 600; }

.principal { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }

/* ---------- Topo ---------- */
.topo {
  height: var(--topo);
  background: var(--superficie);
  display: flex; align-items: center; gap: 20px;
  padding: 0 30px;
  position: sticky; top: 0; z-index: 20;
}
.topo .btn-menu.mobile { display: none; }
.busca {
  display: flex; align-items: center; gap: 10px;
  background: var(--fundo); border-radius: 30px;
  padding: 0 18px; height: 44px; width: min(380px, 100%);
}
.busca .ico { color: var(--roxo); }
.busca input { border: 0; background: none; outline: none; flex: 1; font-size: 13px; }
.busca input::placeholder { color: var(--texto-3); }
.topo-links { font-size: 12px; font-weight: 700; color: var(--roxo); letter-spacing: .4px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.icone-badge { position: relative; color: #B4B2C4; display: block; }
.icone-badge:hover { color: var(--roxo); }
.icone-badge .bolinha {
  position: absolute; top: -9px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; border: 2px solid #fff; color: #fff; font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}
.b-ciano { background: var(--ciano); }
.b-azul { background: var(--azul); }
.b-rosa { background: var(--rosa); }
.b-roxo { background: var(--roxo); }
.divisor-v { width: 1px; height: 34px; background: var(--borda); }
.usuario { display: flex; align-items: center; gap: 12px; position: relative; }
.usuario-botao { display: flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; padding: 0; text-align: left; }
.usuario-botao strong { display: block; font-size: 14px; font-weight: 700; }
.usuario-botao small { white-space: nowrap; color: var(--texto-3); font-size: 11px; }
.usuario-botao .ico { color: var(--texto-3); }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 14px); min-width: 200px;
  background: #fff; border-radius: var(--raio); box-shadow: 0 12px 40px rgba(46, 22, 106, .12);
  padding: 8px; display: none;
}
.dropdown.aberto { display: block; }
.dropdown a, .dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px;
  color: var(--texto-2); font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left;
}
.dropdown a:hover, .dropdown button:hover { background: var(--roxo-suave); color: var(--roxo); }

/* ---------- Conteúdo ---------- */
.conteudo { padding: 30px; flex: 1; }
.cabecalho { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.cabecalho h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.2px; }
.cabecalho p { margin: 2px 0 0; color: var(--texto-3); font-size: 13px; }
.cabecalho-acoes { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.caixa-busca {
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--raio-sm);
  padding: 0 16px; height: 46px; min-width: 260px;
}
.caixa-busca .ico { color: var(--roxo); }
.caixa-busca input { border: 0; outline: none; background: none; flex: 1; font-size: 13px; }
.caixa-periodo {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--raio-sm);
  padding: 0 16px; height: 46px;
}
.caixa-periodo .ico-roxo { width: 30px; height: 30px; display: grid; place-items: center; color: var(--roxo); }
.caixa-periodo strong { display: block; font-size: 13px; }
.caixa-periodo small { color: var(--texto-3); font-size: 11px; }

.cartao { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-pad { padding: 24px; }
.cartao-topo { display: flex; align-items: center; gap: 12px; padding: 22px 24px 0; }
.cartao-topo h2 { margin: 0; font-size: 17px; font-weight: 700; }
.cartao-topo p { margin: 2px 0 0; font-size: 12px; color: var(--texto-3); }
.cartao-topo .link { margin-left: auto; color: var(--roxo); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }

.grade-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.stat { display: flex; align-items: center; gap: 18px; padding: 22px 24px; }
.stat-num { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-rotulo { color: var(--texto-3); font-size: 13px; }

.anel { --p: 50; --c: var(--rosa); --t: var(--rosa-suave);
  width: 66px; height: 66px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--t) 0);
  display: grid; place-items: center; position: relative;
}
.anel::before { content: ''; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.anel span { position: relative; font-size: 13px; font-weight: 700; color: var(--c); }
.anel.ciano { --c: var(--ciano); --t: #E2F6FD; }

.tile { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; flex: none; position: relative; color: #fff;
  background: linear-gradient(140deg, #8E3FF0, var(--roxo)); }
.tile .bolinha { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ciano); border: 3px solid #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

.barrinhas { display: flex; align-items: flex-end; gap: 8px; height: 66px; flex: none; }
.barrinhas i { width: 14px; border-radius: 8px; display: block; }
.barrinhas i:nth-child(1) { background: #CDEFFC; }
.barrinhas i:nth-child(2) { background: var(--ciano); }
.legenda { display: grid; gap: 8px; }
.legenda div { display: grid; grid-template-columns: 8px auto; column-gap: 10px; align-items: center; }
.legenda .ponto { width: 8px; height: 8px; border-radius: 50%; }
.legenda strong { font-size: 17px; line-height: 1; }
.legenda small { grid-column: 2; color: var(--texto-3); font-size: 11px; }

.grade-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }

/* Tabela */
.tabela-wrap { overflow-x: auto; padding: 8px 8px 12px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--texto-3); font-weight: 600; padding: 14px 16px; white-space: nowrap;
}
.tabela td { padding: 14px 16px; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:hover td { background: #FBFAFE; }
.tabela .titulo { font-weight: 700; color: var(--texto); display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .sub { color: var(--texto-3); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.tabela .num { font-weight: 700; white-space: nowrap; }
.tabela .acoes { display: flex; gap: 6px; justify-content: flex-end; }

.pill { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pill-ok { background: var(--verde-suave); color: var(--verde); }
.pill-warn { background: var(--laranja-suave); color: #D98200; }
.pill-danger { background: var(--vermelho-suave); color: var(--vermelho); }
.pill-muted { background: #F1F1F5; color: var(--texto-2); }
.pill-roxo { background: var(--roxo-suave); color: var(--roxo); }
.pill-rosa { background: var(--rosa-suave); color: var(--rosa); }
.pill-ciano { background: #E2F6FD; color: #1499C7; }

/* Avatares com iniciais */
.avatar { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; position: relative; }
.avatar.g { width: 86px; height: 86px; border-radius: 16px; font-size: 26px; }
.avatar .selo { position: absolute; right: -8px; bottom: -6px; padding: 3px 6px; border-radius: 7px; border: 2px solid #fff; font-size: 10px; color: #fff; }
.avatar .online { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--verde); }
.t1 { background: #F1E9FC; color: var(--roxo); }
.t2 { background: #E2F6FD; color: #1499C7; }
.t3 { background: #FDE6F8; color: #C42AAE; }
.t4 { background: #E3F8EA; color: #1E9A43; }
.t5 { background: #FFF3E1; color: #C87700; }
.t6 { background: #E8EFFD; color: var(--azul); }

.lista-pessoas { list-style: none; margin: 0; padding: 12px 24px 18px; }
.lista-pessoas li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.lista-pessoas strong { display: block; font-size: 14px; }
.lista-pessoas small { color: var(--texto-3); font-size: 12px; }
.lista-pessoas .fim { margin-left: auto; }

/* Barras de categoria */
.barras { padding: 18px 24px 24px; display: grid; gap: 16px; }
.barra-linha { display: grid; grid-template-columns: 120px 1fr 36px; gap: 12px; align-items: center; font-size: 13px; }
.barra-linha span { color: var(--texto-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-linha b { text-align: right; }
.trilho { height: 8px; background: #F1F0F7; border-radius: 8px; overflow: hidden; }
.trilho i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #8E3FF0, var(--roxo)); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--raio-sm); border: 0; cursor: pointer;
  font-weight: 700; font-size: 13px; letter-spacing: .3px; white-space: nowrap;
  transition: background .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--roxo); color: #fff; }
.btn-primario:hover { background: var(--roxo-escuro); }
.btn-claro { background: #fff; color: var(--roxo); }
.btn-claro:hover { background: var(--roxo-suave); }
.btn-suave { background: var(--roxo-suave); color: var(--roxo); }
.btn-bloco { width: 100%; }
.btn-ico {
  width: 34px; height: 34px; border-radius: 8px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: #F4F3F8; color: var(--texto-2);
}
.btn-ico:hover { background: var(--roxo-suave); color: var(--roxo); }
.btn-ico.ok:hover { background: var(--verde-suave); color: var(--verde); }
.btn-ico.perigo:hover { background: var(--vermelho-suave); color: var(--vermelho); }
.btn-cta { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); color: #fff; display: grid; place-items: center; }

/* Abas de filtro (estilo "pastas") */
.abas { display: flex; gap: 6px; flex-wrap: wrap; padding: 20px 24px 6px; }
.aba { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; color: var(--texto-2); font-weight: 600; }
.aba:hover { color: var(--roxo); }
.aba.ativa { background: var(--roxo-suave); color: var(--roxo); }
.aba em { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #EEEDF4; color: var(--texto-2); }
.aba.ativa em { background: var(--ciano); color: #fff; }

/* Cartões de usuário */
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.card-pessoa { padding: 26px 22px 22px; text-align: center; position: relative; }
.card-pessoa .avatar { margin: 0 auto 16px; }
.card-pessoa h3 { margin: 0; font-size: 16px; }
.card-pessoa .papel { color: var(--texto-3); font-size: 12px; margin: 4px 0 2px; }
.card-pessoa .empresa { color: var(--roxo); font-weight: 700; font-size: 12px; }
.card-pessoa .menu-card { position: absolute; top: 14px; right: 12px; }
.card-pessoa ul { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; display: grid; gap: 10px; }
.card-pessoa li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--texto-2); overflow: hidden; }
.card-pessoa li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-pessoa li i { width: 28px; height: 28px; border-radius: 8px; background: var(--roxo-suave); color: var(--roxo); display: grid; place-items: center; flex: none; }
.card-pessoa form { margin-top: 18px; }

/* Formulários */
.campo { display: grid; gap: 8px; margin-bottom: 18px; }
.campo label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-3); }
.input {
  width: 100%; height: 48px; border-radius: var(--raio-sm); border: 1px solid var(--borda);
  background: #fff; padding: 0 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--roxo); box-shadow: 0 0 0 4px rgba(100, 24, 195, .1); }
.input-ico { position: relative; }
.input-ico .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.input-ico .input { padding-left: 46px; }
.input-ico .ver-senha { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--texto-3); padding: 6px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.check { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-2); cursor: pointer; font-weight: 600; }
.check input { width: 18px; height: 18px; accent-color: var(--roxo); }

.alerta { padding: 12px 16px; border-radius: var(--raio-sm); margin-bottom: 18px; font-weight: 600; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.alerta-erro { background: var(--vermelho-suave); color: #B42318; }
.alerta-ok { background: var(--verde-suave); color: #1E7B39; }

.vazio { padding: 48px 24px; text-align: center; color: var(--texto-3); }

/* Paginação (CI4 pager default_full) */
.paginacao { padding: 6px 24px 22px; display: flex; justify-content: flex-end; }
.paginacao ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.paginacao a { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; display: grid; place-items: center; background: #F4F3F8; color: var(--texto-2); font-weight: 700; font-size: 12px; }
.paginacao .active a { background: var(--roxo); color: #fff; }

/* ---------- Login ---------- */
.login-pagina { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.login-form-lado { display: flex; flex-direction: column; padding: 40px 56px; background: #fff; }
.login-form-lado .marca { padding: 0; height: auto; }
.login-caixa { width: min(400px, 100%); margin: auto; padding: 40px 0; }
.login-caixa h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.4px; }
.login-caixa > p { margin: 0 0 32px; color: var(--texto-3); }
.login-linha { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 26px; }
.login-seguro { margin-top: 26px; display: flex; gap: 10px; align-items: center; color: var(--texto-3); font-size: 12px; }
.login-seguro .ico { color: var(--verde); }
.login-rodape { color: var(--texto-3); font-size: 12px; }
.login-arte {
  margin: 16px; border-radius: 24px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.18) 0 120px, transparent 121px),
    radial-gradient(circle at 10% 95%, rgba(59,196,242,.45) 0 180px, transparent 181px),
    linear-gradient(150deg, #7B2FE0 0%, var(--roxo) 55%, #4A0F99 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px;
}
.login-arte h2 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; max-width: 440px; letter-spacing: -.4px; }
.login-arte p { margin: 0; opacity: .8; max-width: 420px; font-size: 15px; }
.login-mock { position: absolute; top: 64px; left: 56px; right: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.login-mock .cartao { color: var(--texto); padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 20px 50px rgba(30, 6, 80, .25); }
.login-mock .cartao:nth-child(2) { transform: translateY(34px); }
.login-mock .cartao:nth-child(3) { grid-column: 1 / -1; width: 78%; justify-self: end; transform: translateY(20px); }

/* ---------- Responsivo ---------- */
@media (max-width: 1200px) {
  .grade-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2 { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 60px rgba(30, 6, 80, .15); }
  .app.menu-aberto .sidebar { transform: none; }
  .principal { margin-left: 0; }
  .topo .btn-menu.mobile { display: block; }
  .topo-links, .topo .divisor-v { display: none; }
  .login-pagina { grid-template-columns: 1fr; }
  .login-arte { display: none; }
}
@media (max-width: 640px) {
  .topo { padding: 0 16px; gap: 12px; }
  .busca { display: none; }
  .topo-direita { gap: 16px; }
  .usuario-botao div { display: none; }
  .conteudo { padding: 20px 16px; }
  .grade-stats { grid-template-columns: 1fr; gap: 16px; }
  .caixa-busca { min-width: 0; width: 100%; }
  .login-form-lado { padding: 28px 20px; }
}

/* ---------- Equipe e perfis de acesso ---------- */
.pessoa-linha { display: flex; align-items: center; gap: 14px; }
.pessoa-linha .titulo { display: flex; align-items: center; gap: 8px; }
.titulo-sec { margin: 0 0 18px; font-size: 15px; font-weight: 700; }
.titulo-sec:not(:first-child) { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--borda); }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dica { color: var(--texto-3); font-size: 12px; margin: -6px 0 18px; }
.dica a { color: var(--roxo); font-weight: 700; }

.perfil-t1 { background: #F1E9FC; color: var(--roxo); }
.perfil-t2 { background: #E2F6FD; color: #1499C7; }
.perfil-t3 { background: #FDE6F8; color: #C42AAE; }
.perfil-t4 { background: #E3F8EA; color: #1E9A43; }
.perfil-t5 { background: #FFF3E1; color: #C87700; }
.perfil-t6 { background: #E8EFFD; color: var(--azul); }
.ponto-perfil { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; box-shadow: inset 0 0 0 3px currentColor; }

.opcoes-tipo, .lista-perfis { display: grid; gap: 10px; margin-bottom: 18px; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.opcao:hover { border-color: #CDB8EE; }
.opcao:has(input:checked) { border-color: var(--roxo); background: #FBF8FF; }
.opcao input { margin-top: 3px; accent-color: var(--roxo); width: 16px; height: 16px; flex: none; }
.opcao strong { display: block; font-size: 14px; }
.opcao small { color: var(--texto-3); font-size: 12px; }
.opcao.desabilitada, .check.desabilitada { opacity: .45; cursor: not-allowed; }

.grade-perfis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.card-perfil { padding: 22px; display: flex; flex-direction: column; }
.card-perfil-topo { display: flex; gap: 14px; align-items: center; }
.card-perfil-topo h3 { margin: 0; font-size: 16px; }
.card-perfil-topo small { color: var(--texto-3); font-size: 12px; }
.card-perfil .desc { color: var(--texto-2); font-size: 13px; margin: 14px 0; }
.modulos-tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.modulos-tags li { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: #F1F1F5; color: var(--texto-2); }
.modulos-tags li.cheio { background: var(--roxo-suave); color: var(--roxo); }
.modulos-tags li.nada { background: var(--laranja-suave); color: #D98200; }
.card-perfil-acoes { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.card-perfil-acoes .btn { height: 38px; flex: 1; }

.matriz { display: grid; gap: 14px; }
.modulo { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 14px 18px 16px; margin: 0; }
.modulo legend { display: contents; }
.modulo legend .check { color: var(--texto); }
.modulo legend small { display: block; color: var(--texto-3); font-size: 12px; margin: 4px 0 12px 28px; }
.modulo .perms { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-left: 28px; }
.modulo .perms .check { font-weight: 400; font-size: 13px; }

.cores { display: flex; gap: 10px; }
.cor { width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 0 0 2px transparent; }
.cor input { position: absolute; opacity: 0; pointer-events: none; }
.cor:has(input:checked) { box-shadow: inset 0 0 0 2px currentColor; }
.cor::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }

.vazio-grande { text-align: center; max-width: 520px; margin: 40px auto; padding: 48px 32px; }
.vazio-grande h1 { margin: 16px 0 6px; font-size: 22px; }
.vazio-grande p { color: var(--texto-3); margin: 0 0 24px; }
.vazio-ico { width: 64px; height: 64px; border-radius: 18px; background: var(--roxo-suave); color: var(--roxo); display: inline-grid; place-items: center; }

@media (max-width: 720px) {
  .linha-2 { grid-template-columns: 1fr; }
}

/* ---------- Empresas, contratos, financeiro e portal ---------- */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-bottom: 24px; }
.mini-stats .cartao { padding: 20px 22px; }
.mini-stats span { display: block; color: var(--texto-3); font-size: 12px; font-weight: 600; }
.mini-stats strong { display: block; font-size: 24px; margin-top: 6px; }
.txt-perigo { color: var(--vermelho); }

.logo-mini { object-fit: cover; background: #fff; border: 1px solid var(--borda); }
.logo-grande { display: block; max-width: 160px; max-height: 120px; border-radius: 12px; border: 1px solid var(--borda); object-fit: contain; }
.thumb { width: 64px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; border: 1px solid var(--borda); }
.vazio-thumb { display: grid; place-items: center; background: var(--roxo-suave); color: var(--roxo); border: 0; }
.banner-preview { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--borda); }
a.pessoa-linha { color: inherit; }
.cabecalho h1 .pill { vertical-align: 4px; margin-left: 6px; }

.vender { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.vender .input { flex: 1; min-width: 220px; }
.lista-contratos { display: grid; gap: 16px; }
.grade-contratos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.contrato { border: 1px solid var(--borda); border-left: 4px solid var(--roxo); border-radius: var(--raio-sm); padding: 18px 20px; background: #fff; }
.contrato.ativo { border-left-color: var(--verde); }
.contrato.aguardando { border-left-color: var(--laranja); }
.contrato.atrasado { border-left-color: var(--vermelho); }
.contrato.cancelado { border-left-color: #C9C8D3; opacity: .7; }
.contrato-topo { display: flex; gap: 16px; align-items: flex-start; }
.contrato-topo h3 { margin: 0; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.contrato-topo small { color: var(--texto-3); font-size: 12px; }
.contrato-valor { margin-left: auto; font-size: 20px; font-weight: 700; white-space: nowrap; }
.contrato-valor small { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.contrato-info { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 14px 0; color: var(--texto-2); font-size: 13px; }
.contrato-info span { display: inline-flex; gap: 6px; align-items: center; }
.contrato-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.contrato-acoes .btn { height: 38px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.baixa summary { list-style: none; }
.baixa summary::-webkit-details-marker { display: none; }
.baixa[open] form { display: grid; gap: 10px; margin-top: 10px; min-width: 280px; padding: 14px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); }

.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 24px; margin: 0 0 10px; }
.dados dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-3); }
.dados dd { margin: 4px 0 0; font-weight: 600; word-break: break-word; }

.seletor-mes { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--raio-sm); padding: 6px 8px; }
.seletor-mes strong { min-width: 140px; text-align: center; font-size: 14px; }

.empresa-portal { display: flex; gap: 12px; align-items: center; margin: 0 22px 18px; padding: 14px; border-radius: 14px; background: var(--fundo); }
.empresa-portal strong { display: block; font-size: 14px; }
.empresa-portal small { color: var(--texto-3); font-size: 12px; }

/* ---------- Diretório: perfil, fotos, planos, categorias ---------- */
.linha-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.checks-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin: 4px 0 6px; }
.checks-grade .check { font-weight: 400; font-size: 13px; }
.mais-cats { margin: -4px 0 18px; padding: 12px 16px; border: 1px dashed var(--borda); border-radius: var(--raio-sm); }
.mais-cats summary { cursor: pointer; color: var(--roxo); font-weight: 700; font-size: 13px; }
.mais-cats[open] summary { margin-bottom: 12px; }
.horarios { display: grid; gap: 8px; margin-bottom: 20px; }
.horario-linha { display: grid; grid-template-columns: 120px 1fr auto 1fr; gap: 10px; align-items: center; }
.horario-linha .input { height: 40px; padding: 0 10px; }
.horario-linha span { color: var(--texto-3); font-size: 12px; }

.barra-acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.barra-acoes .sub { color: var(--texto-3); font-size: 12px; }
.pendencias { margin-top: 20px; border: 1px solid #FFE1B3; background: #FFFAF2; border-radius: var(--raio-sm); padding: 16px 18px; }
.pendencias h3 { margin: 0 0 10px; font-size: 14px; display: flex; gap: 8px; align-items: center; color: #9A5B00; }
.pendencias .tabela td { background: transparent; vertical-align: top; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.foto { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); background: #fff; }
.foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto.pendente img { opacity: .7; }
.foto figcaption { display: flex; gap: 8px; align-items: center; padding: 8px 10px; font-size: 12px; color: var(--texto-2); min-height: 50px; }
.foto figcaption .acoes, .foto figcaption form { margin-left: auto; display: flex; gap: 6px; }

.grade-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.plano-card { padding: 22px; display: flex; flex-direction: column; }
.plano-card.popular { box-shadow: 0 0 0 2px var(--roxo); }
.plano-card.inativo { opacity: .6; }
.plano-topo { display: flex; gap: 8px; align-items: center; }
.plano-topo h3 { margin: 0; font-size: 17px; }
.plano-preco { font-size: 30px; font-weight: 700; margin: 12px 0 2px; }
.plano-preco small { font-size: 13px; color: var(--texto-3); font-weight: 600; }
.plano-recursos { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; font-size: 13px; color: var(--texto-2); }
.plano-recursos li { display: flex; gap: 8px; align-items: flex-start; }
.plano-recursos li svg { color: var(--verde); flex: none; margin-top: 2px; }

.abas-soltas { padding: 0; margin: 0 0 20px; }
.grupo-cat { margin-bottom: 20px; }
.grupo-cat.inativo { opacity: .6; }

@media (max-width: 720px) {
  .linha-3 { grid-template-columns: 1fr; }
  .horario-linha { grid-template-columns: 1fr 1fr; }
  .horario-linha span { display: none; }
}
.campo .check { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--texto-2); font-weight: 600; }
.horario-linha { grid-template-columns: 104px minmax(0, 1fr) auto minmax(0, 1fr); }
.horario-linha .input { min-width: 0; width: 100%; font-size: 13px; }

/* ---------- Avaliações, leads e relatório ---------- */
.lista-avaliacoes, .lista-leads { display: grid; }
.avaliacao, .lead { padding: 18px 24px; border-top: 1px solid var(--borda); }
.avaliacao:first-child, .lead:first-child { border-top: 0; }
.avaliacao p, .lead p { margin: 10px 0; color: var(--texto-2); }
.avaliacao-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.estrelas { color: #FFB020; letter-spacing: 2px; font-size: 15px; }
.estrelas i { color: #E2E1EA; font-style: normal; }
.resposta { background: var(--fundo); border-radius: var(--raio-sm); padding: 10px 14px; font-size: 13px; color: var(--texto-2); margin: 8px 0 12px; }
.recusar { display: flex; gap: 8px; flex: 1; min-width: 280px; }
.recusar .input { height: 44px; }
.responder { display: grid; gap: 8px; }
.responder .btn { justify-self: start; height: 38px; }
.lead h3 { margin: 8px 0 2px; font-size: 16px; }
.lead.novo { background: #FCFAFF; box-shadow: inset 3px 0 0 var(--roxo); }
.texto-curto { display: block; white-space: normal; }
.metricas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.metricas-grade div { background: var(--fundo); border-radius: var(--raio-sm); padding: 14px 16px; }
.metricas-grade strong { display: block; font-size: 22px; }
.metricas-grade span { font-size: 12px; color: var(--texto-3); }
a.cartao { color: inherit; display: block; }
.mini-stats .var { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; }
.var.sobe { color: var(--verde); }
.var.desce { color: var(--vermelho); }
.nota-grande { font-size: 44px; font-weight: 700; line-height: 1; }
.nota-grande small { font-size: 13px; color: var(--texto-3); font-weight: 600; margin-left: 6px; }
.grafico-dias { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-bottom: 18px; }
.grafico-dias .dia { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; position: relative; }
.grafico-dias i { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; display: block; }
.grafico-dias i.v, .legenda-inline i.v { background: var(--roxo); }
.grafico-dias i.c, .legenda-inline i.c { background: var(--ciano); }
.grafico-dias small { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--texto-3); }
.legenda-inline { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--texto-2); }
.legenda-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lista-metricas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-metricas li { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-2); border-bottom: 1px solid var(--borda); padding-bottom: 8px; }

/* ---------- Ofertas ---------- */
.selo-oferta { flex: none; display: inline-grid; place-items: center; min-width: 74px; height: 42px; padding: 0 10px; border-radius: 10px; background: linear-gradient(135deg, #EE3CD2, #6418C3); color: #fff; font-weight: 700; font-size: 12px; text-align: center; }

/* menu longo: a barra lateral rola em vez de espremer o conteúdo */
.sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar > * { flex-shrink: 0; }
.linha-2 > *, .linha-3 > * { min-width: 0; }
.linha-2 .input, .linha-3 .input { min-width: 0; width: 100%; }
.editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }
.dica code { background: var(--fundo); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

.checks-linha { display: flex; flex-wrap: wrap; gap: 8px 18px; }