/*
 * Painel da administradora (/admin) com a moldura do dashboard da TheMembers.
 * Só medidas (tamanhos, cores, fontes e espaçamentos) tiradas dos prints e do
 * dashboard ao vivo em 09/10/2026; nenhum código ou arquivo de lá. Medidas e
 * diferenças na nota 18 do cofre.
 *
 * Vem depois do tema do Filament e fora das camadas dele, então ganha dele.
 */

:root {
  --painel-preto: #0b0b13;
  --painel-fundo: #f5f5f5;
  --painel-borda: #e5e7eb;
  --painel-texto: #131824;
  --painel-texto-2: #4b5563;
  --painel-texto-3: #6b7280;
  --painel-azul: #1a47f7;
  --painel-azul-claro: #ebf3ff;
  --painel-menu-texto: #5b6478;
  --painel-menu-grupo: #475569;
  --painel-topo: 50px;
}

/* Fundo, fonte e texto */
body.fi-body,
.fi-body .fi-main-ctn {
  background: var(--painel-fundo);
  color: var(--painel-texto);
}

/* ---------- Barra de cima ---------- */
.fi-topbar-ctn {
  position: sticky;
  top: 0;
  z-index: 30;
}

.fi-topbar {
  background: var(--painel-preto);
  min-height: var(--painel-topo);
  height: var(--painel-topo);
  padding-inline: 20px;
  box-shadow: none;
  border: 0;
}

.fi-topbar .fi-icon-btn {
  color: #cbd5e1;
}

.fi-topbar .fi-icon-btn:hover {
  background: rgba(255, 255, 255, .08);
}

/* A seta de abrir o menu fica no pé do menu, como na TheMembers. */
.fi-topbar-collapse-sidebar-btn-ctn {
  display: none;
}

.painel-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.painel-logo-nome {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.fi-topbar-end {
  gap: 10px;
}

/* Busca no topo, escura como a barra */
.fi-topbar .fi-global-search-field .fi-input-wrp {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}

.fi-topbar .fi-global-search-field input {
  color: #e2e8f0;
}

.fi-topbar .fi-global-search-field .fi-input-wrp-prefix {
  color: #94a3b8;
}

.painel-ajuda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 6px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.painel-ajuda:hover {
  color: #fff;
}

.painel-ajuda-icone {
  width: 15px;
  height: 15px;
}

.painel-divisor {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .15);
}

/* Nome e cargo ao lado da foto, abrem o mesmo menu da foto */
.painel-perfil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  order: 1;
  height: 36px;
  padding: 0 4px 0 6px;
  color: #cbd5e1;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.painel-perfil-nome {
  font-size: 12px;
  font-weight: 500;
}

.painel-cargo {
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  color: var(--painel-preto);
  background: #fff;
  border-radius: 9999px;
}

.fi-topbar .fi-user-menu {
  order: 0;
}

.fi-topbar .fi-user-menu-trigger .fi-avatar {
  width: 26px;
  height: 26px;
}

@media (max-width: 639px) {
  .painel-perfil-nome,
  .painel-ajuda span {
    display: none;
  }

  /* No celular: o logo no lugar da busca geral (cada lista tem a sua busca). */
  .fi-topbar .fi-global-search {
    display: none;
  }

  .fi-topbar-start {
    display: flex;
  }

  .painel-logo {
    height: 36px;
    max-width: 140px;
  }
}

.painel-perfil-cliente {
  padding: 0 12px 10px;
  margin-top: -6px;
  font-size: 12px;
  color: var(--painel-texto-3);
}

/* ---------- Menu da esquerda ---------- */
.fi-sidebar.fi-main-sidebar {
  background: var(--painel-preto);
  border: 0;
  box-shadow: none;
}

@media (min-width: 1024px) {
  .fi-sidebar.fi-main-sidebar {
    top: var(--painel-topo);
    height: calc(100dvh - var(--painel-topo));
  }
}

.fi-sidebar-header-ctn {
  display: none;
}

.fi-sidebar-nav {
  padding: 14px 10px 12px;
  gap: 0;
}

.fi-sidebar-nav-groups {
  gap: 0;
}

.fi-sidebar-group {
  gap: 2px;
}

.fi-sidebar-group-btn {
  padding: 0 9px 6px;
  margin-top: 14px;
  min-height: 0;
}

.fi-sidebar-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--painel-menu-grupo);
}

.fi-sidebar-group-collapse-btn {
  display: none;
}

.fi-sidebar-item-btn {
  min-height: 36px;
  padding: 0 8.5px;
  gap: 11px;
  border-radius: 0;
  color: var(--painel-menu-texto);
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
  background: rgba(255, 255, 255, .05);
}

.fi-sidebar-item-icon {
  width: 19px;
  height: 19px;
  color: var(--painel-menu-texto);
}

.fi-sidebar-item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--painel-menu-texto);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background: rgba(26, 71, 247, .28);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: #fff;
  font-weight: 600;
}

.fi-sidebar-item .fi-badge {
  border-radius: 9999px;
}

/* Fechado: só os ícones, os grupos viram um traço fino */
@media (min-width: 1024px) {
  .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
    display: block;
    height: 1px;
    padding: 0;
    margin: 14px 4px 10px;
    background: rgba(255, 255, 255, .12);
  }

  .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn > * {
    display: none;
  }

  .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
    justify-content: center;
  }
}

.fi-sidebar-footer {
  margin: 0;
  padding: 0;
}

.painel-fixar {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 10px;
}

.painel-fixar button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 36px;
  padding: 0 8.5px;
  color: var(--painel-menu-texto);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: 0;
  cursor: pointer;
}

.painel-fixar button:hover {
  background: rgba(255, 255, 255, .05);
}

.painel-fixar-seta {
  width: 18px;
  height: 18px;
  transition: transform .12s ease-out;
}

.painel-fixar-seta.aberto {
  transform: rotate(180deg);
}

@media (max-width: 1023px) {
  .painel-fixar {
    display: none;
  }
}

/* ---------- Conteúdo ----------
 * Largura da página toda, do menu escuro até a direita, com 40 px de margem
 * como na TheMembers; acima de 1920 px para de crescer e fica no centro
 * (decisão do Alan, 10/10/2026, nota 18).
 */
.fi-main {
  max-width: 1920px;
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  .fi-main {
    padding-inline: 40px;
  }
}

/* Formulários (edição da aula com a prévia, planos, Configurações...) ficam
   na largura de antes, à esquerda: cresce a área em volta, não os campos. */
.fi-page-content > form,
.fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component > form.fi-sc-form {
  max-width: 1080px;
}

.fi-page:has(> .fi-page-header-main-ctn > .fi-page-main > .fi-page-content > form, > .fi-page-header-main-ctn > .fi-page-main > .fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component > form.fi-sc-form) .fi-header {
  max-width: 1080px;
}

@media (max-width: 639px) {
  .fi-main {
    padding: 20px 16px 32px;
  }
}

.fi-header-heading {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--painel-texto);
}

.fi-header-subheading {
  font-size: 14px;
  color: var(--painel-texto-2);
}

/* Cards brancos, borda fina, canto reto */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-section,
.fi-fo-repeater-item,
.fi-in-repeatable-item,
.fi-dropdown-panel,
.fi-modal-window,
.fi-tabs,
.fi-ta-filters-dropdown,
.fi-ta-header-toolbar,
.fi-pagination,
.fi-no-notification,
.fi-simple-main {
  border-radius: 0;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
  background: #fff;
  box-shadow: none;
  border: 1px solid var(--painel-borda);
  --tw-ring-shadow: 0 0 #0000;
}

/* Campos e botões retos; selos continuam redondos */
.fi-input-wrp,
.fi-select-input,
.fi-btn,
.fi-icon-btn,
.fi-fo-file-upload .filepond--root,
.fi-fo-file-upload .filepond--panel-root,
.fi-fo-markdown-editor,
.fi-fo-rich-editor,
.fi-tabs-item,
.fi-dropdown-list-item,
.fi-ac-btn-group,
.fi-fo-toggle-buttons .fi-btn,
.fi-ta-actions .fi-btn {
  border-radius: 0;
}

.fi-input-wrp {
  border: 1px solid var(--painel-borda);
  box-shadow: none;
}

.fi-input-wrp:focus-within {
  border-color: var(--painel-azul);
}

.fi-btn {
  font-weight: 500;
  box-shadow: none;
}

.fi-btn.fi-size-md,
.fi-btn:not([class*='fi-size-']) {
  min-height: 40px;
  padding-inline: 16px;
}

/* Botão secundário (cinza claro da TheMembers) */
.fi-btn.fi-color-gray:not(.fi-outlined) {
  background: #f3f4f6;
  color: var(--painel-texto);
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: none;
}

.fi-btn.fi-color-gray:not(.fi-outlined):hover {
  background: #e5e7eb;
}

.fi-badge {
  border-radius: 9999px;
}

/* Abas do Filament (dentro das páginas) no estilo das abas da TheMembers */
.fi-tabs {
  justify-content: flex-start;
  margin-inline: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 0;
  --tw-ring-shadow: 0 0 #0000;
}

.fi-tabs-item {
  min-height: 40px;
  padding: 6px 14px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
}

.fi-tabs-item.fi-active {
  background: #18181b;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
  color: #fff;
}

/* ---------- Cabeçalho de Plataforma e Produtos ---------- */
.painel-area {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
}

.painel-area-topo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.painel-voltar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--painel-texto);
  background: #fff;
  border: 1px solid var(--painel-borda);
}

.painel-voltar:hover {
  background: #f9fafb;
}

.painel-voltar svg {
  width: 16px;
  height: 16px;
}

.painel-area-titulo {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -.01em;
  color: rgba(0, 0, 0, .88);
}

.painel-area-endereco {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 14px;
  color: rgba(0, 0, 0, .88);
  text-decoration: none;
}

.painel-area-endereco:hover {
  text-decoration: underline;
}

.painel-area-endereco svg {
  width: 14px;
  height: 14px;
}

.painel-abas {
  display: flex;
  gap: 0;
  margin-top: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.painel-aba {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--painel-texto);
  background: #fff;
  text-decoration: none;
}

.painel-aba:hover {
  background: #f3f4f6;
}

.painel-aba.ativa {
  color: #fff;
  background: #18181b;
}

.painel-secoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--painel-borda);
}

.painel-secao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 10px;
  margin-bottom: -3px;
  font-size: 14px;
  font-weight: 500;
  color: var(--painel-texto-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.painel-secao:hover {
  color: var(--painel-texto);
}

.painel-secao.ativa {
  color: var(--painel-azul);
  border-bottom-color: var(--painel-azul);
}

.painel-secao-aviso {
  min-width: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: #e11d48;
  border-radius: 9999px;
}

@media (max-width: 639px) {
  .painel-area-titulo {
    font-size: 26px;
    line-height: 32px;
  }

  .painel-secoes {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .painel-secao {
    flex: none;
  }
}

/* ---------- Início ---------- */
.fi-page-dashboard .fi-wi {
  gap: 16px;
}

.painel-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 479px) {
  .painel-atalhos {
    grid-template-columns: 1fr;
  }
}

.painel-atalho {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 24px;
  color: var(--painel-texto);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--painel-borda);
}

.painel-atalho:hover {
  border-color: #cbd5e1;
}

.painel-atalho-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  color: var(--painel-azul);
  background: #e6edff;
  border-radius: 9999px;
}

.painel-atalho-icone svg {
  width: 18px;
  height: 18px;
}

.painel-atalho-titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
}

.painel-atalho-titulo svg {
  width: 18px;
  height: 18px;
}

.painel-atalho-texto {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: #6a7181;
}

@media (max-width: 479px) {
  .painel-atalho {
    min-height: 0;
    padding: 16px;
  }

  .painel-atalho-icone {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
  }
}

.painel-card {
  height: 100%;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--painel-borda);
}

.painel-card-titulo {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--painel-texto);
}

.painel-alunos-corpo {
  display: flex;
  align-items: center;
  gap: 24px;
}

.painel-rosca {
  flex: none;
  width: 130px;
  height: 130px;
}

@media (max-width: 400px) {
  .painel-alunos-corpo {
    flex-direction: column;
    align-items: flex-start;
  }
}

.painel-alunos-total {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.painel-alunos-legenda {
  max-width: 180px;
  margin: 4px 0 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--painel-texto-2);
}

.painel-periodos {
  display: flex;
  gap: 14px;
}

.painel-periodos > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.painel-periodo-nome {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--painel-texto);
}

.painel-periodo-nome i {
  display: inline-block;
  width: 14px;
  height: 7px;
  border-radius: 9999px;
}

.painel-periodo-numero {
  font-size: 20px;
  font-weight: 500;
  color: var(--painel-texto-2);
}

.painel-logins-grafico {
  display: block;
  width: 100%;
  height: 120px;
}

.painel-logins-dias {
  position: relative;
  height: 18px;
  margin: 6px 0 14px;
  font-size: 11px;
  color: var(--painel-texto-2);
}

.painel-logins-dias span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.painel-logins-dias span:first-child {
  transform: none;
}

.painel-logins-dias span:last-child {
  transform: translateX(-100%);
}

.painel-logins-totais {
  justify-content: space-between;
}

.painel-logins-totais > div:last-child {
  align-items: flex-end;
}

@media (max-width: 639px) {
  .painel-logins-dias span:not(:first-child):not(:last-child) {
    display: none;
  }
}

.painel-engajamento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1023px) {
  .painel-engajamento {
    grid-template-columns: 1fr;
  }
}

.painel-engajamento .painel-card {
  padding: 20px;
}

.painel-card-abas {
  display: flex;
  margin-bottom: 12px;
  border: 1px solid var(--painel-borda);
  padding: 0 12px;
}

.painel-card-abas button {
  flex: 1;
  padding: 10px 4px;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  color: var(--painel-texto);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.painel-card-abas button.ativa {
  color: var(--painel-azul);
  border-bottom-color: var(--painel-azul);
}

.painel-ranking {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-ranking li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid #f0f1f3;
}

.painel-ranking li:last-child {
  border-bottom: 0;
}

.painel-ranking-posicao {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--painel-azul);
  border-radius: 9999px;
}

.painel-ranking-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-ranking-numero {
  font-size: 12px;
  font-weight: 600;
}

.painel-ranking-vazio {
  margin: 0;
  font-size: 14px;
  color: var(--painel-texto-3);
}

/* ---------- Seções em coluna (segunda passada, medida em 09/10/2026) ----------
 * Nas abas de Plataforma, a TheMembers põe as seções num card à esquerda
 * (250 px) e o conteúdo num card à direita, os dois com cantos de 10 px.
 */
.painel-titulo-secao,
.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-header-heading {
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 500;
}

.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-header-subheading {
  font-size: 16px;
  color: var(--painel-texto-3);
}

.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-breadcrumbs {
  display: none;
}

@media (min-width: 1024px) {
  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) > .painel-area {
    display: contents;
  }

  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .painel-area-topo,
  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .painel-abas {
    grid-column: 1 / -1;
  }

  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .painel-abas {
    margin-bottom: 4px;
  }

  .painel-secoes:not(.painel-secoes-linha) {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 13px;
    margin: 0;
    padding: 12px;
    background: #fff;
    border: 0;
    border-radius: 10px;
  }

  .painel-secoes:not(.painel-secoes-linha) .painel-secao {
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 16px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, .88);
    border: 0;
    border-radius: 10px;
  }

  .painel-secoes:not(.painel-secoes-linha) .painel-secao:hover {
    background: #f3f4f6;
  }

  .painel-secoes:not(.painel-secoes-linha) .painel-secao.ativa {
    color: rgba(0, 0, 0, .88);
    background: #e3e5e8;
  }

  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) > .fi-page-header-main-ctn {
    min-width: 0;
    padding: 16px;
    background: #fff;
    border-radius: 10px;
  }

  /* Dentro do card, a tabela e as seções sem a moldura própria */
  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) > .fi-page-header-main-ctn .fi-ta-ctn {
    border: 0;
  }

  /* Colunas com 8 px de cada lado (e não 12), para a tabela de alunos caber
     inteira em 1440 px; se ainda faltar espaço, rola só dentro do card. */
  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-ta-header-cell,
  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-ta-cell .fi-ta-text,
  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-ta-cell .fi-ta-icon {
    padding-inline: 8px;
  }

  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-ta-header-cell:first-child,
  .fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-ta-cell:first-child .fi-ta-text {
    padding-inline-start: 16px;
  }
}

/* Botões e campos das seções com cantos de 10 e 6 px, como lá */
.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-btn {
  border-radius: 10px;
}

.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-input-wrp {
  border-radius: 6px;
}

/* Títulos em Poppins (o resto do painel em Rethink Sans) */
.painel-area-titulo {
  font-family: 'Rethink Sans', sans-serif;
}

/* Abas dentro das seções: sublinhadas, como Pendentes, Não lidos... na TheMembers */
.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-tabs {
  gap: 0;
  border-bottom: 1px solid var(--painel-borda);
}

.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-tabs-item {
  flex: 1;
  justify-content: center;
  background: transparent;
  border-bottom: 2px solid transparent;
}

.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-tabs-item.fi-active {
  background: transparent;
  border-bottom-color: #131824;
}

.fi-page:has(> .painel-area .painel-secoes:not(.painel-secoes-linha)) .fi-tabs-item.fi-active .fi-tabs-item-label {
  color: #131824;
}

/* "Plataforma | Comunidade": o escolhido preto, o outro com contorno */
.fi-btn.painel-alternar {
  min-width: 160px;
  justify-content: center;
  color: #000;
  background: #fff;
  border: 1px solid #000;
}

.fi-btn.painel-alternar.ativo {
  color: #fff;
  background: #000;
}

/* Ficha do aluno: abas em pílula (a escolhida preta), como "Dados pessoais" na TheMembers */
.fi-resource-edit-record-page.fi-resource-alunos .fi-tabs {
  gap: 8px;
}

.fi-resource-edit-record-page.fi-resource-alunos .fi-tabs-item {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.fi-resource-edit-record-page.fi-resource-alunos .fi-tabs-item.fi-active {
  background: #1e1e2a;
}

/* ---------- Cards de Integrações e Ferramentas ---------- */
.painel-grupo-titulo {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--painel-texto);
}

.painel-cards {
  display: grid;
  gap: 16px;
}

.painel-cards-logos {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.painel-cards-ferramentas {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.painel-card-link {
  display: flex;
  color: var(--painel-texto);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--painel-borda);
  border-radius: 10px;
  overflow: hidden;
}

.painel-card-link:hover {
  border-color: #cbd5e1;
}

.painel-cards-logos .painel-card-link {
  flex-direction: column;
}

.painel-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(180deg, #fff, #f6f7f9);
}

.painel-card-rodape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
  font-size: 15px;
  background: #f3f4f6;
  border-top: 1px solid var(--painel-borda);
}

.painel-card-link small {
  display: block;
  font-size: 12px;
  color: var(--painel-texto-3);
}

.painel-cards-ferramentas .painel-card-link {
  align-items: flex-start;
  gap: 14px;
  padding: 24px 20px;
  border: 0;
}

.painel-cards-ferramentas strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
}

.painel-card-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #131824;
  border-radius: 9999px;
}

.painel-card-icone svg {
  width: 20px;
  height: 20px;
}

.painel-grupo-cards + .painel-grupo-cards {
  margin-top: 28px;
}

/* ---------- Produtos: faixa preta no topo, como na TheMembers ----------
 * A faixa vai de ponta a ponta com uma sombra recortada, sem mexer na largura.
 */
.painel-area-produtos .painel-faixa {
  margin: -48px 0 24px;
  padding: 40px 0 32px;
  color: #fff;
  background: var(--painel-preto);
  box-shadow: 0 0 0 100vmax var(--painel-preto);
  clip-path: inset(0 -100vmax);
}

.painel-faixa .painel-area-titulo {
  font-size: 28px;
  line-height: 36px;
  color: #fff;
}

.painel-faixa p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #e5e7eb;
}

@media (max-width: 639px) {
  .painel-area-produtos .painel-faixa {
    margin-top: -20px;
  }
}

/* Em Produtos o título fica na faixa preta: sem título repetido nem caminho */
.fi-page:has(> .painel-area-produtos) .fi-breadcrumbs,
.fi-page:has(> .painel-area-produtos) .fi-header-heading {
  display: none;
}

/* ---------- Início do dono: cards de números e a barra do armazenamento ---------- */
.painel-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.painel-numero-largo {
  grid-column: 1 / -1;
}

@media (max-width: 1023px) {
  .painel-numeros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.painel-numero-titulo {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--painel-texto-2);
}

.painel-numero-valor {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--painel-texto);
}

.painel-numero-valor small {
  font-size: 15px;
  font-weight: 500;
  color: var(--painel-texto-3);
}

.painel-barra {
  height: 8px;
  margin: 12px 0 8px;
  overflow: hidden;
  background: #eef0f3;
  border-radius: 9999px;
}

.painel-barra span {
  display: block;
  height: 100%;
  background: var(--painel-azul);
}

.painel-numero-aviso .painel-barra span {
  background: #e11d48;
}

.painel-numero-nota {
  margin: 0;
  font-size: 13px;
  color: var(--painel-texto-3);
}

.painel-numero-aviso .painel-numero-nota {
  color: #e11d48;
}

/* Alertas do servidor (início do painel do dono) */
.painel-alertas .painel-card-titulo small {
  font-weight: 400;
  color: var(--painel-texto-3);
}

.painel-alertas-com {
  border-left: 4px solid #e11d48;
}

.painel-alertas-ok,
.painel-alertas-email {
  margin: 0;
  font-size: 14px;
  color: var(--painel-texto-3);
}

.painel-alertas-email {
  margin-top: 12px;
  color: #b45309;
}

.painel-alertas-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 12px;
  font-size: 14px;
}

.painel-alertas-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.painel-alertas-lista li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--painel-borda);
}

.painel-alertas-lista time {
  flex: none;
  color: var(--painel-texto-3);
  font-variant-numeric: tabular-nums;
}

.painel-alertas-lista small {
  color: var(--painel-texto-3);
}

/* ---------- Atendimento: conversa do Suporte (11/10/2026) ---------- */
.atendimento { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.atendimento-conversa { display: flex; flex-direction: column; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; background: #fff; overflow: hidden; }
.dark .atendimento-conversa, .dark .atendimento-ficha { background: rgb(24 24 27); border-color: rgba(255,255,255,.1); }
.atendimento-mensagens { display: flex; flex-direction: column; gap: 14px; padding: 18px; max-height: 60vh; min-height: 280px; overflow-y: auto; }
.atendimento-msg { max-width: 78%; display: flex; flex-direction: column; gap: 4px; }
.atendimento-msg.equipe { align-self: flex-end; align-items: flex-end; }
.atendimento-autor, .atendimento-nota { font-size: 12px; color: #6b7280; }
.atendimento-encerra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px; padding: 8px 12px; border-radius: 8px; background: #FFF7E0; color: #6B4E00; font-size: 13px; }
.atendimento-encerra .atendimento-link { border: 0; background: none; padding: 0; cursor: pointer; font-weight: 600; }
.atendimento-balao { padding: 10px 14px; border-radius: 12px; background: #f3f4f6; font-size: 14px; line-height: 1.5; word-break: break-word; }
.atendimento-msg.equipe .atendimento-balao { background: #e8f0e3; }
.dark .atendimento-balao { background: rgba(255,255,255,.07); }
.dark .atendimento-msg.equipe .atendimento-balao { background: rgba(132, 170, 108, .22); }
.atendimento-balao p { margin: 0; }
.atendimento-balao img { max-width: 220px; max-height: 220px; border-radius: 8px; margin-top: 6px; }
.atendimento-arquivo { text-decoration: underline; }
.atendimento-responder { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-top: 1px solid rgba(0,0,0,.06); }
.atendimento-responder textarea { width: 100%; border-radius: 8px; border: 1px solid #d1d5db; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; background: transparent; }
.atendimento-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.atendimento-barra select { border-radius: 8px; border: 1px solid #d1d5db; padding: 6px 10px; font-size: 14px; background: transparent; }
.atendimento-barra > :last-child { margin-left: auto; }
.atendimento-anexar { font-size: 14px; color: #6b7280; cursor: pointer; }
.atendimento-erro { color: #dc2626; font-size: 13px; margin: 0; }
.atendimento-ficha { border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; background: #fff; padding: 16px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 80px; }
.atendimento-ficha h3 { margin: 0; font-size: 16px; font-weight: 600; }
.atendimento-ficha dl { margin: 6px 0; display: grid; gap: 4px; }
.atendimento-ficha dt { font-size: 12px; color: #6b7280; margin-top: 6px; }
.atendimento-ficha dd { margin: 0; }
.atendimento-suave { color: #6b7280; margin: 0; }
.atendimento-link { color: var(--primary-600, #4d7c0f); font-weight: 600; }
@media (max-width: 1023px) { .atendimento { grid-template-columns: 1fr; } .atendimento-ficha { position: static; } }