/* ============================================================
   LAYOUT — cascas das duas áreas: container/nav do aluno e
   shell/sidebar do admin. Componentes reutilizáveis ficam em
   componentes/; aqui é só estrutura de página.
   ============================================================ */

/* ── Área do aluno ─────────────────────────────────────── */

/* Gutter adaptativo via clamp(): ~120px em telas grandes, 16px no mobile. */
.aluno-container {
  width: 100%;
  padding: 32px clamp(16px, 6vw, 120px) 80px;
}

.aluno-container--estreito {
  max-width: 1200px;
  margin: 0 auto;
}

/* Navbar do aluno — estilo "tab underline" */
.nav-aluno-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  color: var(--txt-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.nav-aluno-item:hover {
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
}

.nav-aluno-item--ativa {
  background: var(--sup);
  color: var(--sucesso-texto);
  font-weight: 600;
  border-bottom: 2px solid var(--verde);
}

.nav-aluno-item--ativa:hover {
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
}

/* Botão verde da topbar (padrão btn-success com ícone) */
.btn-acessar-maino {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  color: var(--sobre-cor);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: var(--verde);
  flex-shrink: 0;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn-acessar-maino:hover {
  background-color: var(--verde-escuro);
  box-shadow: 0 4px 14px rgba(42, 114, 33, 0.3);
}

/* Grid de trilhas — 3 colunas; colapsa em telas menores */
.grid-trilhas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) {
  .grid-trilhas {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .grid-trilhas {
    grid-template-columns: 1fr;
  }
}

/* Card de trilha — hover com elevação e borda azul */
.card-trilha {
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}
.card-trilha:hover {
  box-shadow: 0 4px 16px rgba(3, 56, 96, 0.12);
  transform: translateY(-2px);
}

/* Linha de aula clicável no detalhe da trilha */
.linha-aula-clicavel:hover {
  background: var(--sup-sutil) !important;
}

/* Accordion de módulos (<details>/<summary>): remove o marcador nativo
   e alterna o chevron conforme o estado open. */
.aluno-container details > summary {
  list-style: none;
}
.aluno-container details > summary::-webkit-details-marker {
  display: none;
}
.aluno-container details[open] > summary {
  border-radius: 8px 8px 0 0;
}
.aluno-container details > summary .chevron-aberto {
  display: none;
}
.aluno-container details[open] > summary .chevron-fechado {
  display: none;
}
.aluno-container details[open] > summary .chevron-aberto {
  display: inline-flex;
}

/* Link "Ver todas/todos" — sublinha e escurece no hover */
.link-ver-todos {
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
  text-decoration: none;
}
.link-ver-todos:hover {
  color: var(--sucesso-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Painel admin ──────────────────────────────────────── */
/* Os tokens --adm-* e a linguagem visual dos componentes ficam em
   paginas/admin-tema.css; aqui só a estrutura do painel. */

.admin-shell {
  display: flex;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: var(--adm-bg);
}

/* Página padrão do admin: coluna de leitura centrada, com respiro nas bordas */
.admin-pagina {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 36px 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 760px) {
  .admin-pagina { padding: 24px 16px 40px; }
}

/* Cabeçalho de página: título sobre fundo limpo, com um fio separando do conteúdo.
   (Era uma faixa azul cheia com ícone; o nome da classe ficou.) */
.cabecalho-secao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--adm-border);
}
.cabecalho-secao__titulo {
  color: var(--adm-text);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.cabecalho-secao__titulo--cresce {
  flex: 1;
}
/* O ícone repetia o do menu; sai do cabeçalho */
.cabecalho-secao__icone,
.cabecalho-secao .ap-cabecalho-icone {
  display: none;
}
.cabecalho-secao--g12 {
  gap: 12px;
}
.cabecalho-secao__voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--adm-text-3);
  text-decoration: none;
  transition: color 0.12s;
}
.cabecalho-secao__voltar:hover {
  color: var(--adm-text);
}
.cabecalho-secao__voltar svg {
  display: block;
}

/* ── Menu lateral ── */
.admin-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--adm-surface);
  border-right: 1px solid var(--adm-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width 0.2s ease;
  flex-shrink: 0;
  z-index: 40;
  width: 240px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 20px 14px;
  cursor: pointer;
  min-height: 66px;
  user-select: none;
}
.sidebar-logo__img {
  height: 28px;
  object-fit: contain;
  object-position: left center;
  flex: 1;
  min-width: 0;
}
.sidebar-logo__mini {
  height: 22px;
  width: 22px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 auto;
}
.sidebar-logo__seta {
  display: flex;
  color: var(--adm-text-4);
  flex-shrink: 0;
  transition: color 0.12s;
}
.sidebar-logo:hover .sidebar-logo__seta {
  color: var(--adm-text-3);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px 12px;
  overflow-y: auto;
  min-height: 0;
}
/* Em telas baixas o menu rola; os itens nunca são espremidos. */
.sidebar-nav > * { flex-shrink: 0; }
/* Rolagem do menu: barra fina na cor do tema; recolhido (68px), sem barra
   visível — a roda do mouse continua rolando. */
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--adm-border-strong) transparent;
}
.admin-shell--recolhido .sidebar-nav { scrollbar-width: none; }
/* Mesma regra para navegadores sem scrollbar-width (Chrome/Edge < 121). */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--adm-border-strong); border-radius: 3px; }
.admin-shell--recolhido .sidebar-nav::-webkit-scrollbar { display: none; }

/* Títulos de grupo do menu */
.sidebar-grupo {
  margin: 20px 0 6px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--adm-text-4);
  white-space: nowrap;
}
.sidebar-nav > .sidebar-item:first-child { margin-top: 4px; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--adm-text-2);
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-item:hover {
  background: var(--adm-hover);
  color: var(--adm-text);
}
.sidebar-item--ativo,
.sidebar-item--ativo:hover {
  background: var(--adm-accent-soft);
  color: var(--marca-texto);
  font-weight: 600;
}
.sidebar-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  color: var(--adm-text-4);
  transition: color 0.12s;
}
.sidebar-item:hover .sidebar-item__icon { color: var(--adm-text-3); }
.sidebar-item--ativo .sidebar-item__icon,
.sidebar-item--ativo:hover .sidebar-item__icon { color: var(--marca-texto); }
.sidebar-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-top: 1px solid var(--adm-border);
}
.sidebar-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 8px;
  overflow: hidden;
}
.sidebar-usuario__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--adm-accent-soft);
  color: var(--marca-texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sidebar-usuario__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.sidebar-usuario__nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--adm-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-usuario__papel {
  font-size: 12px;
  color: var(--adm-text-3);
}
.sidebar-sair {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  /* !important para vencer o bold global de button{} em botoes.css —
     este item de menu não deve ficar bold. */
  font-weight: 500 !important;
  color: var(--adm-text-3);
  background: none;
  border: none;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-sair svg { flex-shrink: 0; margin: 0 2px; }
.sidebar-sair:hover {
  background: var(--adm-danger-soft);
  color: var(--adm-danger);
}

.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

.admin-footer {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--adm-text-4);
  margin-top: auto;
}

/* Abas da página de conteúdo do admin (alternadas pelo abas_controller).
   Sem font-weight no .aba: o bold global de button{} (botoes.css) já vale
   hoje sobre o inline 400 — preservamos o render atual. */
.aba {
  background: none;
  border: none;
  padding: 6px 16px;
  font-size: 16px;
  cursor: pointer;
  line-height: 1.2;
  font-family: inherit;
  color: var(--txt-3); /* WCAG AA sobre branco (o #979899 anterior dava 2.9:1) */
  border-bottom: 2px solid transparent;
}
.aba--ativa {
  color: var(--txt-2);
  font-weight: 700 !important;
  border-bottom: 2px solid var(--azul);
}

/* Footer comum (aluno) */
.rodape {
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: var(--texto-apagado);
  background: var(--fundo);
}

/* ── Topbar do aluno ───────────────────────────────────────
   Header fixo do layouts/aluno.html.erb (logo + nav + CTA Mainô +
   menu de usuário). Migrado dos style= inline 1:1. */
.shell-aluno {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar-aluno {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--sup);
  border-bottom: 1px solid var(--borda);
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 6vw, 120px);
  gap: 24px;
}
.topbar-aluno__logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.topbar-aluno__logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.topbar-aluno__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

/* Conteúdo principal do aluno (offset do header fixo) */
.shell-aluno__main {
  padding-top: 64px;
  flex: 1;
  background: var(--fundo);
  display: flex;
  flex-direction: column;
}

/* Menu de usuário (avatar + nome + dropdown) */
.menu-usuario {
  position: relative;
  flex-shrink: 0;
}
.menu-usuario__gatilho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
}
.menu-usuario__nome {
  font-size: 14px;
  /* !important vence o bold global de button{} (botoes.css) — era 400 inline */
  font-weight: 400 !important;
  color: var(--txt-3);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-usuario__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.menu-usuario__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-usuario__iniciais {
  font-size: 11px;
  font-weight: 700;
  color: var(--sobre-cor);
}
/* Ponte invisível para o mouse não perder o hover ao descer pro dropdown */
.menu-usuario__ponte {
  position: absolute;
  right: 0;
  top: 100%;
  width: 176px;
  height: 6px;
}
.menu-usuario__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 196px;
  background: var(--sup-elevada);
  border: 1px solid var(--borda-suave);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 4px;
  z-index: 20;
}
.menu-usuario__item {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--texto);
  border-radius: 8px;
  transition: background 0.12s;
}
/* Todo item do menu reage ao mouse (Perfil, Tema e Sair). */
.menu-usuario__item:hover,
.menu-usuario__dropdown .seletor-tema:hover { background: var(--sup-hover); }
/* "Refazer tour" é <button>: mesmo visual do link "Perfil". */
.menu-usuario__item--botao {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 400 !important;
  text-align: left;
  cursor: pointer;
}
.menu-usuario__divisor {
  height: 1px;
  background: var(--divisor);
  margin: 2px 8px;
}
.menu-usuario__sair {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  /* !important vence o bold global de button{} (botoes.css) — era 400 inline */
  font-weight: 400 !important;
  color: var(--vermelho);
  background: none;
  border: none;
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.menu-usuario__sair:hover { background: var(--perigo-suave); }

/* Seção dependente de um gatilho desligado (condicional_controller) */
fieldset.secao-desabilitada {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Hover dos controles do cabeçalho e do menu lateral ── */
.menu-usuario__gatilho { transition: background 0.12s; }
.menu-usuario__gatilho:hover { background: var(--sup-hover); }
.topbar-aluno__logo-link { transition: opacity 0.12s; }
.topbar-aluno__logo-link:hover { opacity: 0.75; }
.sidebar-logo__seta {
  padding: 4px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.sidebar-logo:hover .sidebar-logo__seta {
  background: var(--adm-hover);
  color: var(--adm-text);
}