/* ============================================================
   TEMA DO ADMIN — a linguagem visual do painel.

   Neutros frios (escala gray), o azul Mainô como único destaque (ação
   principal, item ativo, foco) e verde/vermelho/âmbar só para estado. Um
   raio, uma sombra, uma borda.

   Carregado por último e com escopo .admin-shell: os componentes
   (botões, tabelas, chips, campos) são compartilhados com a área do aluno,
   que não muda. A estrutura do painel (menu, cabeçalho, página) está em
   layout.css; as regras de cada tela, nos paginas/admin-*.css.
   ============================================================ */

.admin-shell {
  /* ── Tokens: os claros do painel (escala gray fria); o escuro é o
        mesmo da área do aluno (tokens.css). ── */
  --sup-pagina: light-dark(#f7f8fa, var(--escuro-pagina));
  --sup-sutil: light-dark(#f9fafb, var(--escuro-sup-sutil));
  --sup-hover: light-dark(#f2f4f7, var(--escuro-sup-hover));
  --linha-suave: light-dark(#f2f4f7, var(--escuro-linha-suave));
  --linha: light-dark(#eaecf0, var(--escuro-linha));
  --linha-forte: light-dark(#d0d5dd, var(--escuro-linha-forte));
  --linha-input: light-dark(#d0d5dd, var(--escuro-linha-input));
  --txt-1: light-dark(#101828, var(--escuro-txt-1));
  --txt-2: light-dark(#344054, var(--escuro-txt-2));
  --txt-3: light-dark(#667085, var(--escuro-txt-3));
  --txt-4: light-dark(#98a2b3, var(--escuro-txt-4));
  --marca-borda: light-dark(#c9d9e8, rgba(125, 184, 238, 0.35));
  --perigo-texto: light-dark(#b42318, #ff8f8f);
  --perigo-suave: light-dark(#fef3f2, rgba(255, 143, 143, 0.13));
  --perigo-borda: light-dark(#fecdca, rgba(255, 143, 143, 0.32));
  --sucesso-texto: light-dark(#067647, #72d48b);
  --sucesso-suave: light-dark(#ecfdf3, rgba(114, 212, 139, 0.13));
  --sucesso-borda: light-dark(#abefc6, rgba(114, 212, 139, 0.32));
  --alerta-suave: light-dark(#fffaeb, rgba(247, 185, 85, 0.13));
  --alerta-borda: light-dark(#fedf89, rgba(247, 185, 85, 0.35));

  /* ── Nomes do redesign do admin → tokens por função ── */
  --adm-bg: var(--sup-pagina);
  --adm-surface: var(--sup);
  --adm-subtle: var(--sup-sutil);
  --adm-hover: var(--sup-hover);
  --adm-border: var(--linha);
  --adm-border-strong: var(--linha-forte);
  --adm-text: var(--txt-1);
  --adm-text-2: var(--txt-2);
  --adm-text-3: var(--txt-3);
  --adm-text-4: var(--txt-4);
  --adm-accent-soft: light-dark(rgba(3, 56, 96, 0.07), rgba(125, 184, 238, 0.12));
  --adm-danger: var(--perigo-texto);
  --adm-danger-soft: var(--perigo-suave);
  --adm-danger-border: var(--perigo-borda);
  --adm-success: var(--sucesso-texto);
  --adm-success-soft: var(--sucesso-suave);
  --adm-success-border: var(--sucesso-borda);
  --adm-warning: var(--alerta-texto);
  --adm-warning-soft: var(--alerta-suave);
  --adm-warning-border: var(--alerta-borda);
  --adm-shadow-xs: 0 1px 2px var(--sombra-cor);
  --adm-shadow-sm: 0 1px 3px var(--sombra-cor), 0 1px 2px var(--sombra-cor);
  --adm-ring: var(--anel-foco);

  /* Aliases --color-* (e --fundo) com os claros do painel: são resolvidos
     onde são declarados, então precisam ser redeclarados aqui. Os da área
     do aluno (--texto, --borda…) seguem com os tons do aluno, como antes. */
  --fundo: var(--sup-pagina);
  --color-bg-page: var(--sup-pagina);
  --color-bg-subtle: var(--sup-sutil);
  --color-bg-hover: var(--sup-hover);
  --color-text-primary: var(--txt-1);
  --color-text-secondary: var(--txt-2);
  --color-text-tertiary: light-dark(#475467, var(--escuro-txt-2));
  --color-text-muted: var(--txt-3);
  --color-text-faint: var(--txt-4);
  --color-border: var(--linha-forte);
  --color-border-light: var(--linha);
  --color-border-subtle: var(--sup-hover);
  --color-success: var(--sucesso-texto);
  --color-success-soft: var(--sucesso-suave);
  --color-success-border: var(--sucesso-borda);
  --color-danger: var(--perigo-texto);
  --color-danger-soft: var(--perigo-suave);
  --color-danger-border: var(--perigo-borda);
  --color-warning: var(--alerta-texto);
  --color-warning-soft: var(--alerta-suave);
  --color-warning-border: var(--alerta-borda);
  --color-primary-border: var(--marca-borda);

  color: var(--adm-text);
  line-height: 1.5;
  letter-spacing: -0.003em;
  font-feature-settings: "cv11", "ss03";
}

/* ── Superfícies: toda caixa do admin é igual (borda, raio, sombra) ── */
.admin-shell :is(
  .card-admin, .card-config, .kpi, .cartao-form, .cartao-resumo, .ap-card-empresa, .kpi-trilha,
  .tabela-envoltura, .trilha-tabela-envoltura, .ap-tabela-envoltura, .ap-tabela-empresa-envoltura
) {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  box-shadow: var(--adm-shadow-xs);
}
.admin-shell .card-config__cabecalho {
  border-bottom-color: var(--adm-border);
}
.admin-shell .card-config__titulo,
.admin-shell .titulo-card {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--adm-text);
}
.admin-shell .card-config__descricao {
  max-width: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--adm-text-3);
  text-wrap: pretty;
}

/* ── Números de destaque: um estilo só, cor só quando significa algo ── */
.admin-shell .kpi,
.admin-shell .kpi--rel {
  padding: 20px 24px;
  gap: 6px;
}
.admin-shell .kpi__rotulo {
  font-size: 13px;
  font-weight: 500;
  color: var(--adm-text-3);
}
.admin-shell :is(.kpi__valor, .kpi-metrica__valor) {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--adm-text);
}
.admin-shell .kpi-metrica__valor--rel { font-size: 28px; }
.admin-shell .kpi-metrica__valor--verde { color: var(--adm-text); }
.admin-shell .kpi-metrica__valor--vermelho { color: var(--adm-danger); }
.admin-shell .kpi-metrica__valor--cinza { color: var(--adm-text-4); }
.admin-shell :is(.kpi-metrica__sub, .kpi-metrica__sub--rel) {
  font-size: 13px;
  color: var(--adm-text-3);
}
.admin-shell .kpi-metrica__link { color: var(--marca-texto); }
.admin-shell .kpi--clicavel { transition: box-shadow 0.15s, border-color 0.15s; }
.admin-shell .kpi--clicavel:hover {
  border-color: var(--adm-border-strong);
  box-shadow: var(--adm-shadow-sm);
}

/* ── Tabelas ── */
.admin-shell table { border-collapse: collapse; }
.admin-shell thead th {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--adm-text-3);
  background: var(--adm-subtle);
  border-bottom: 1px solid var(--adm-border);
}
.admin-shell tbody td {
  padding-inline: 16px;
  border-bottom-color: var(--adm-hover);
  vertical-align: middle;
}
.admin-shell tbody tr:last-child > td { border-bottom: 0; }
.admin-shell tbody tr:hover > td { background: var(--adm-subtle); }

/* ── Botões ── */
.admin-shell :is(button, a, input).btn-primary {
  background: var(--azul);
  border: 1px solid var(--azul);
  color: var(--sobre-cor);
  border-radius: 8px;
  font-weight: 600 !important;
  box-shadow: var(--adm-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.admin-shell :is(button, a, input).btn-primary:not(:disabled):hover {
  background: var(--azul-pressed);
  border-color: var(--azul-pressed);
  color: var(--sobre-cor);
}
.admin-shell :is(button, a, input).btn-primary:not(:disabled):active { transform: none; }
.admin-shell :is(button, a, input).btn-secondary {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border-strong);
  color: var(--adm-text-2);
  border-radius: 8px;
  font-weight: 600 !important;
  box-shadow: var(--adm-shadow-xs);
}
.admin-shell :is(button, a, input).btn-secondary:not(:disabled):hover {
  background: var(--adm-subtle);
  border-color: var(--adm-border-strong);
  color: var(--adm-text);
}
.admin-shell :is(button, a, input):is(.btn-primary, .btn-secondary):focus-visible {
  outline: 0;
  box-shadow: var(--adm-ring);
}
.admin-shell :is(button, a, input):is(.btn-primary, .btn-secondary):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Campos de formulário ── */
.admin-shell :is(
  input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"],
  input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], select, textarea
) {
  background-color: var(--adm-surface);
  border: 1px solid var(--adm-border-strong);
  border-radius: 8px;
  color: var(--adm-text);
  box-shadow: var(--adm-shadow-xs);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.admin-shell :is(
  input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"],
  input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], select, textarea
):focus {
  outline: 0;
  border-color: var(--azul);
  box-shadow: var(--adm-ring);
}
.admin-shell :is(input, textarea)::placeholder { color: var(--adm-text-4); }
.admin-shell :is(input, select, textarea):disabled {
  background-color: var(--adm-subtle);
  color: var(--adm-text-4);
  cursor: not-allowed;
}
.admin-shell select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.admin-shell :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--marca-texto); }
.admin-shell input[type="file"] { min-width: 340px; font-size: 13px; color: var(--adm-text-3); }
.admin-shell input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border-strong);
  border-radius: 8px;
  color: var(--adm-text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--adm-shadow-xs);
  cursor: pointer;
  transition: background 0.12s;
}
.admin-shell input[type="file"]::file-selector-button:hover { background: var(--adm-subtle); }

/* ── Chips e tags: peso médio, paleta de estado única ── */
.admin-shell :is(
  .chip, .chip-mini, .tag-trilha, .ap-chip-perfil, .ap-chip-risco, .ap-chip-plano, .ap-chip-modulo,
  .ap-chip-empresa, .ap-chip-divergente, .ap-chip-interna, .ap-chip-onboarding, .ap-chip-inativo-titulo, .chip-status
) {
  font-weight: 500;
  letter-spacing: 0;
}
/* neutro */
.admin-shell :is(.chip--neutro, .chip-mini--neutra, .chip-mini--inativa, .tag-trilha--rascunho, .tag-trilha--perfil,
  .ap-chip-perfil, .ap-chip-empresa, .ap-chip-plano--erp1) {
  background: var(--adm-hover);
  border-color: var(--adm-border);
  color: var(--adm-text-2);
}
.admin-shell .chip-mini--inativa { color: var(--adm-text-3); }
/* sucesso */
.admin-shell :is(.chip--sucesso, .chip-mini--ativa, .tag-trilha--ativa, .ap-chip-onboarding) {
  background: var(--adm-success-soft);
  border-color: var(--adm-success-border);
  color: var(--adm-success);
}
/* risco */
.admin-shell :is(.chip--risco, .ap-chip-risco, .ap-chip-inativo-titulo) {
  background: var(--adm-danger-soft);
  border-color: var(--adm-danger-border);
  color: var(--adm-danger);
}
/* atenção */
.admin-shell :is(.chip--alerta, .tag-trilha--essencial, .tag-trilha--sem-perfis, .ap-chip-divergente, .ap-chip-plano--erp3) {
  background: var(--adm-warning-soft);
  border-color: var(--adm-warning-border);
  color: var(--adm-warning);
}
/* informação: o azul da marca */
.admin-shell :is(.chip--info, .chip-mini--pilar, .ap-chip-interna, .ap-chip-modulo, .ap-chip-plano--erp2) {
  background: var(--adm-accent-soft);
  border-color: var(--color-primary-border);
  color: var(--marca-texto);
}

/* ── Links e ações: azul da marca, nunca verde ── */
.admin-shell :is(.acao-link, .link-ver-tudo, .ap-link-acao) {
  color: var(--marca-texto);
  font-weight: 600;
}
.admin-shell :is(.acao-link, .link-ver-tudo, .ap-link-acao):hover { text-decoration: underline; text-underline-offset: 3px; }
/* ícones de ação das tabelas: discretos, ganham cor no hover */
.admin-shell :is(.ap-link-acao, .acao-link):has(> svg),
.admin-shell .acao-botao:has(> svg) {
  display: inline-flex;
  padding: 6px;
  border-radius: 6px;
  color: var(--adm-text-4);
  transition: color 0.12s, background 0.12s;
}
.admin-shell :is(.ap-link-acao, .acao-link):has(> svg):hover,
.admin-shell .acao-botao:has(> svg):hover {
  color: var(--marca-texto);
  background: var(--adm-hover);
  text-decoration: none;
}
.admin-shell .acao-link--excluir:hover {
  color: var(--adm-danger);
  background: var(--adm-danger-soft);
}
.admin-shell .trilha-acao--editar,
.admin-shell .trilha-acao--relatorio,
.admin-shell .trilha-acao--duplicar,
.admin-shell .trilha-acao--excluir {
  color: var(--adm-text-4);
  transition: color 0.12s;
}
.admin-shell .trilha-acao--editar:hover,
.admin-shell .trilha-acao--relatorio:hover,
.admin-shell .trilha-acao--duplicar:hover { color: var(--marca-texto); }
.admin-shell .trilha-acao--excluir:hover { color: var(--adm-danger); }

/* ── Botão de exportar: mesmo visual do secundário ── */
.admin-shell .btn-exportar {
  border-color: var(--adm-border-strong);
  color: var(--adm-text-2);
  box-shadow: var(--adm-shadow-xs);
}
.admin-shell .btn-exportar:hover {
  background: var(--adm-subtle);
  color: var(--adm-text);
}

/* ── Abas ── */
/* Cabeçalho seguido de abas: a linha das abas é o divisor */
.admin-shell .cabecalho-secao:has(+ .abas-secao) {
  border-bottom: 0;
  padding-bottom: 0;
}
.admin-shell .aba {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--adm-text-3);
  transition: color 0.12s;
}
.admin-shell .aba:hover { color: var(--adm-text); }
.admin-shell .aba--ativa {
  color: var(--marca-texto);
  font-weight: 600 !important;
  border-bottom: 2px solid var(--azul);
}

/* ── Barras de progresso ── */
.admin-shell :is(.progresso-trilha, .ap-progresso__trilho) {
  height: 6px;
  background: var(--adm-border);
  border-radius: 999px;
}

/* ── Rodapé de página e estados vazios ── */
.admin-shell :is(.vazio, td.vazio) { color: var(--adm-text-3); }

/* ============================================================
   FILTROS DAS LISTAS
   Valem para toda tela com filtro_tabela_controller (usuários, empresas, trilhas,
   conquistas, edições, feedbacks, relatórios...): a barra, os campos, o resumo dos
   filtros ativos, o contador e o estado vazio. Os campos são alcançados pelo
   data-filtro-tabela-target, então não depende da classe de cada página.
   ============================================================ */

.admin-shell :is(.ap-barra-filtros, .trilha-filtros, .barra-filtros) {
  gap: 12px;
  margin-bottom: 0;
}
.admin-shell :is(.ap-filtros-grupo, .trilha-filtros__grupo, .grupo-filtros) {
  gap: 10px;
}

/* medida única dos controles */
.admin-shell :is(
  .ap-input-filtro, .filtro-controle, .filtro-busca, .filtro-select,
  [data-filtro-tabela-target~="busca"], [data-filtro-tabela-target~="select"]
) {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--adm-text);
}

/* busca: lupa dentro do campo e largura própria */
.admin-shell [data-filtro-tabela-target~="busca"] {
  width: 244px;
  max-width: 100%;
  padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%2398a2b3' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M13.5 13.5L17 17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
}
.admin-shell [data-filtro-tabela-target~="busca"][data-filtro-campo="cnpj"] { width: 200px; }
/* placeholder longo (ex.: "título, pilar ou apresentador") que não cabe em 244px */
.admin-shell [data-filtro-tabela-target~="busca"].filtro-busca--larga { width: 340px; }
.admin-shell [data-filtro-tabela-target~="busca"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  opacity: 0.55;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E") center / contain no-repeat;
}
.admin-shell [data-filtro-tabela-target~="busca"]::-webkit-search-cancel-button:hover { opacity: 1; }

.admin-shell [data-filtro-tabela-target~="select"] {
  min-width: 150px;
  max-width: 230px;
}

/* ações da página (Exportar, Novo...) ficam à direita mesmo quando a barra quebra */
.admin-shell .ap-acoes-topo { margin-left: auto; }

/* campo com filtro aplicado: o azul da marca avisa que há recorte */
.admin-shell :is(input, select).filtro-ativo {
  border-color: var(--azul);
  background-color: var(--adm-accent-soft);
  color: var(--marca-texto);
  font-weight: 500;
}

/* resumo dos filtros ativos (montado pelo controller, logo abaixo da barra) */
.admin-shell .filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 -4px;
}
.admin-shell .filtros-ativos__titulo {
  margin-right: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--adm-text-3);
}
.admin-shell .filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--color-primary-border);
  border-radius: 999px;
  background: var(--adm-accent-soft);
  color: var(--marca-texto);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background 0.12s;
}
.admin-shell .filtro-chip:hover { background: var(--marca-suave-forte); }
.admin-shell .filtro-chip__rotulo { opacity: 0.75; }
.admin-shell .filtro-chip__valor { font-weight: 600; }
.admin-shell .filtro-chip__x {
  font-size: 16px;
  line-height: 1;
  margin-top: -1px;
  opacity: 0.55;
}
.admin-shell .filtro-chip:hover .filtro-chip__x { opacity: 1; }
.admin-shell .filtros-ativos__limpar {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--adm-text-3);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.admin-shell .filtros-ativos__limpar:hover { color: var(--adm-text); }

/* contador */
.admin-shell :is(.ap-contagem, .trilha-contador) {
  margin: 0;
  font-size: 13px;
  color: var(--adm-text-3);
  font-variant-numeric: tabular-nums;
}

/* nada casou com os filtros */
.admin-shell .filtro-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 24px;
  text-align: center;
}
.admin-shell .filtro-vazio__titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--adm-text);
}
.admin-shell .filtro-vazio__texto {
  max-width: 340px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--adm-text-3);
}

/* ============================================================
   FORMULÁRIOS
   Rótulo, ajuda, valor só de leitura, interruptor, opções em pílula e zona de
   risco: o padrão de qualquer formulário do admin (página ou modal). Reaproveita
   as classes ap-* que as telas já usam, então não é preciso reescrever o HTML.
   ============================================================ */

.admin-shell .ap-label-edicao,
.admin-shell .ap-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--adm-text-2);
}
.admin-shell .ap-obrigatorio { color: var(--adm-danger); }

/* texto de apoio embaixo do campo */
.admin-shell :is(.form-ajuda, .ap-nota-espelho, .ap-form-ajuda) {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--adm-text-3);
}
.admin-shell .form-ajuda__link {
  color: var(--marca-texto);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* campo preenchido pelo sistema (não editável): tem a altura e a borda de um campo,
   só que apagado, pra alinhar com os vizinhos */
.admin-shell .ap-valor-estatico {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--adm-border);
  border-radius: 8px;
  background: var(--adm-subtle);
  color: var(--adm-text-2);
  font-size: 14px;
}
.admin-shell .ap-valor-estatico--vazio { color: var(--adm-text-4); }

/* cartão de seção de formulário */
.admin-shell .ap-card-empresa { padding: 24px 28px; }
.admin-shell .ap-card-empresa__titulo {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--adm-text);
}
.admin-shell .ap-card-empresa__descricao {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--adm-text-3);
}
.admin-shell .ap-card-empresa__titulo + .ap-grade-empresa,
.admin-shell .ap-card-empresa__titulo + .ap-modulos-lista { margin-top: 18px; }
.admin-shell .ap-grade-empresa {
  gap: 20px 24px;
  align-items: start;
  margin-bottom: 0;
}
.admin-shell .ap-grade-empresa__largo { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .admin-shell .ap-grade-empresa { grid-template-columns: 1fr; }
}

/* interruptor (liga/desliga): no lugar de select Sim/Não */
.admin-shell .interruptor {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.admin-shell .interruptor input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.admin-shell .interruptor__trilho {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--adm-border-strong);
  transition: background 0.15s;
}
.admin-shell .interruptor__trilho::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sup);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
  transition: transform 0.15s;
}
.admin-shell .interruptor input:checked + .interruptor__trilho { background: var(--azul); }
.admin-shell .interruptor input:checked + .interruptor__trilho::after { transform: translateX(16px); }
.admin-shell .interruptor input:focus-visible + .interruptor__trilho { box-shadow: var(--adm-ring); }
.admin-shell .interruptor__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--adm-text);
}
.admin-shell .interruptor__ajuda {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--adm-text-3);
  text-wrap: pretty;
}

/* opções em pílula (módulos contratados): a marcada fica azul */
.admin-shell .ap-modulos-lista { gap: 8px; }
.admin-shell .ap-modulo-opcao {
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--adm-border-strong);
  border-radius: 999px;
  background: var(--adm-surface);
  color: var(--adm-text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.admin-shell .ap-modulo-opcao:hover { background: var(--adm-subtle); }
.admin-shell .ap-modulo-opcao:has(input:checked) {
  border-color: var(--azul);
  background: var(--adm-accent-soft);
  color: var(--marca-texto);
}
.admin-shell .ap-modulo-opcao:has(input:focus-visible) { box-shadow: var(--adm-ring); }
.admin-shell .ap-aviso-modulos {
  margin-bottom: 14px;
  border-color: var(--adm-warning-border);
  background: var(--adm-warning-soft);
  color: var(--adm-warning);
}

/* rodapé de ações do formulário */
.admin-shell .ap-rodape-empresa { border-top-color: var(--adm-border); }

/* zona de risco: a ação destrutiva fica sozinha, longe do Salvar */
.admin-shell .zona-risco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border: 1px solid var(--adm-danger-border);
  border-radius: 12px;
  background: var(--adm-surface);
}
.admin-shell .zona-risco__titulo {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--adm-danger);
}
.admin-shell .zona-risco__texto {
  margin: 0;
  font-size: 13px;
  color: var(--adm-text-3);
}
@media (max-width: 760px) {
  .admin-shell .zona-risco { flex-direction: column; align-items: flex-start; }
}
.admin-shell .ap-btn-excluir-empresa {
  flex-shrink: 0;
  border-color: var(--adm-danger-border);
  color: var(--adm-danger);
  box-shadow: var(--adm-shadow-xs);
  transition: background 0.12s;
}
.admin-shell .ap-btn-excluir-empresa:hover { background: var(--adm-danger-soft); }

/* tabela de usuários dentro do detalhe da empresa ocupa o cartão todo */
.admin-shell .ap-tabela-empresa-envoltura { overflow-x: auto; }
.admin-shell .ap-tabela-empresa { width: 100%; }

/* chip de plano: neutro (plano novo não tem cor própria) */
.admin-shell .ap-chip-plano {
  background: var(--adm-hover);
  border: 1px solid var(--adm-border);
  color: var(--adm-text-2);
}

/* tela de Planos */
.admin-shell .plano-novo {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-shell .plano-novo__campo { flex: 1 1 280px; max-width: 420px; }
/* o nome salva ao sair do campo: parece texto até o mouse ou o foco chegarem */
.admin-shell .plano-nome__campo {
  min-width: 240px;
  border-color: transparent;
  box-shadow: none;
  background-color: transparent;
  font-weight: 500;
}
.admin-shell .plano-nome__campo:hover { border-color: var(--adm-border-strong); }
.admin-shell .plano-nome__campo:focus {
  border-color: var(--azul);
  background-color: var(--adm-surface);
  box-shadow: var(--adm-ring);
}
.admin-shell .plano-chave {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--adm-text-3);
}

/* ── Texto corrido: usa a largura do cartão ──
   As telas travavam descrições e dicas em 520–680px, então em tela larga o texto
   quebrava cedo e sobrava um vazio à direita. O respiro vem do padding do cartão. */
.admin-shell :is(.criterio__hint, .integracao-teste__texto, .ap-card-empresa__descricao) {
  max-width: none;
  text-wrap: pretty;
}
.admin-shell .integracao-teste > div:first-child { flex: 1; min-width: 0; }

/* ── Formulário em seções (medalha; serve a qualquer form longo de modal) ── */
.admin-shell .form-medalha { display: flex; flex-direction: column; gap: 28px; }
.admin-shell .form-secao { display: flex; flex-direction: column; gap: 16px; }
.admin-shell .form-secao__titulo {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--adm-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--adm-text-3);
}
.admin-shell .form-linha { display: flex; align-items: flex-start; gap: 16px; }
.admin-shell .form-campo { display: flex; flex-direction: column; min-width: 0; }
.admin-shell .form-campo--cresce { flex: 1; }
.admin-shell .form-campo--icone { width: 72px; flex-shrink: 0; }
.admin-shell .form-campo--numero { width: 120px; flex-shrink: 0; }
.admin-shell .form-campo--numero[hidden] { display: none; }
@media (max-width: 560px) {
  .admin-shell .form-linha { flex-wrap: wrap; }
  .admin-shell .form-campo--cresce { flex-basis: 100%; }
}
.admin-shell .form-campo .input-admin,
.admin-shell .form-campo select { width: 100%; box-sizing: border-box; }
.admin-shell .input-admin { height: 40px; font-size: 14px; }
.admin-shell .input-admin--area { height: auto; padding-top: 10px; padding-bottom: 10px; resize: vertical; }
.admin-shell .input-admin--icone { padding: 0; text-align: center; font-size: 22px; }
.admin-shell .label-admin { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--adm-text-2); }
.admin-shell .label-asterisco { color: var(--adm-danger); }
.admin-shell .label-opcional { font-weight: 400; color: var(--adm-text-4); }
.admin-shell .hint-admin { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--adm-text-3); }

/* ícones sugeridos */
.admin-shell .icones-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.admin-shell .icone-sugerido {
  width: 36px;
  height: 36px;
  border: 1px solid var(--adm-border);
  border-radius: 8px;
  background: var(--adm-surface);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.admin-shell .icone-sugerido:hover { background: var(--adm-hover); }
.admin-shell .icone-sugerido[aria-pressed="true"] {
  border-color: var(--azul);
  background: var(--adm-accent-soft);
}

/* prévia: como o aluno vê a medalha */
.admin-shell .previa-medalha {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--adm-border-strong);
  border-radius: 12px;
  background: var(--adm-subtle);
}
.admin-shell .previa-medalha__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--adm-surface);
  box-shadow: var(--adm-shadow-sm);
  font-size: 26px;
}
.admin-shell .previa-medalha__corpo { min-width: 0; padding-right: 56px; }
.admin-shell .previa-medalha__titulo {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--adm-text);
  overflow-wrap: anywhere;
}
.admin-shell .previa-medalha__texto { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--adm-text-3); overflow-wrap: anywhere; }
.admin-shell .previa-medalha__vazio { color: var(--adm-text-4); font-weight: 400; }
.admin-shell .previa-medalha__selo {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--adm-text-4);
}

/* segunda linha de uma célula (e-mail embaixo do nome) */
.admin-shell .celula-sublinha { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--adm-text-3); }

.admin-shell .form-ajuda__link:hover { color: var(--marca-texto-hover); }