/*
 * Uma sala do Moodle (tema Moove, filho do Boost) recriada à mão.
 *
 * As medidas vieram da sala real: fonte Roboto, fundo #f2f3f7, barra branca
 * de 70px com borda #dee2e6, faixa azul #0f47ad de 60px com os links da
 * disciplina em branco e negrito, título de 32px. O CSS da Sol (sol-styles.css)
 * é o arquivo real do plugin, carregado à parte pelo próprio widget.
 *
 * O Moodle de verdade traz o Bootstrap inteiro. Aqui só existe o que a página
 * usa, e os seletores que o widget procura (nav.navbar, .primary-navigation,
 * nav.moremenu ul[role=menubar]) estão no HTML com os mesmos nomes.
 */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fontes/roboto-latin.woff2") format("woff2");
}

:root {
  --navbar-height: 70px;
  --azul: #0f47ad;
  --texto: #1d2125;
  --borda: #dee2e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-top: var(--navbar-height);
  background: #f2f3f7;
  color: var(--texto);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--azul); text-decoration: none; }

/* ——— Barra superior ——— */

nav.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  height: var(--navbar-height);
  background: #fff;
  border-bottom: 1px solid var(--borda);
  padding: 0 8px;
}

.navbar .container-fluid {
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-toggler {
  display: none;
  border: 0;
  background: none;
  font-size: 22px;
  padding: 6px 10px;
  color: var(--texto);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 0 4px;
  color: var(--azul);
  white-space: nowrap;
}
.navbar-brand svg { width: 34px; height: 34px; }
.marca { line-height: 1.05; }
.marca small { display: block; font-size: 9px; letter-spacing: .32em; color: #5b6b80; font-weight: 500; }
.marca strong { font-size: 19px; font-weight: 700; letter-spacing: .02em; }

.primary-navigation { height: 100%; }
.primary-navigation nav.moremenu,
.primary-navigation ul[role="menubar"] { height: 100%; }
.primary-navigation ul[role="menubar"] {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-navigation .nav-item { display: flex; }
.primary-navigation .nav-link {
  display: flex;
  align-items: center;
  padding: 8px;
  color: var(--texto);
  white-space: nowrap;
}
.primary-navigation .nav-link:hover { text-decoration: underline; }
.primary-navigation .d-none { display: none; }

.usernav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  padding-right: 6px;
  color: var(--texto);
}
.usernav .icone { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.usernav .separador { width: 1px; height: 28px; background: var(--borda); }
.avatar-usuario {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.avatar-usuario span {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #e9ecef;
  color: #495057;
  font-weight: 500;
}

/* Painel do celular: o widget põe a Sol aqui também. Fechado na demo. */
.drawer-primary { display: none; }

/* ——— Faixa da disciplina ——— */

.secondary-navigation {
  background: var(--azul);
  height: 60px;
  overflow: hidden;
}
.secondary-navigation ul {
  display: flex;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1200px;
  list-style: none;
}
.secondary-navigation a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 8px 16px;
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.secondary-navigation a.active { border-bottom-color: #fff; }

/* ——— Aviso da demo ——— */

.aviso-demo {
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  background: #fff8e1;
  border: 1px solid #f5d77a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  font-size: 14px;
  color: #5c4400;
}
.aviso-demo strong { color: #3d2d00; }
.aviso-demo button {
  margin-left: auto;
  border: 1px solid #d9a400;
  background: #fff;
  color: #5c4400;
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.aviso-demo button:hover { background: #fff3c4; }

/* ——— Cabeçalho da página ——— */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 48px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  font-size: 15px;
  color: #5b6b80;
}
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: #8a96a6; }
.breadcrumb a { color: var(--azul); }

h1.titulo-curso {
  margin: 6px 0 22px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

/* ——— Conteúdo da disciplina ——— */

.conteudo-curso {
  background: #fff;
  border-radius: 8px;
  padding: 8px 28px 28px;
}

.secao { padding: 18px 0; border-bottom: 1px solid #edf0f2; }
.secao:last-child { border-bottom: 0; }

.secao h2 {
  margin: 4px 0 10px;
  font-size: 20px;
  font-weight: 700;
}
.secao h2.faixa {
  margin: 6px 0 12px;
  padding: 8px 12px;
  background: #343f4b;
  color: #fff;
  text-align: center;
  font-size: 19px;
  border-radius: 2px;
}
.secao > p { margin: 0 0 10px; color: #424b55; font-size: 15px; }

.atividades { list-style: none; margin: 0; padding: 0; }
.atividade {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  border-radius: 6px;
}
.atividade:hover { background: #f6f8fa; }
.atividade .icone-mod {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 8px;
}
.atividade .icone-mod svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; }
.atividade .icone-mod.conteudo { background: #399be2; }
.atividade .icone-mod.comunicacao { background: #eb66a2; }
.atividade .icone-mod.avaliacao { background: #f7634d; }
.atividade .icone-mod.colaboracao { background: #5b40ff; }
.atividade .tipo { display: block; font-size: 12px; color: #6a737b; text-transform: uppercase; letter-spacing: .04em; }
.atividade a { font-weight: 500; color: var(--azul); }
.atividade .datas { margin-top: 2px; font-size: 13px; color: #424b55; }
.atividade .datas b { font-weight: 500; }
.atividade .status {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 13px;
  color: #424b55;
  white-space: nowrap;
}
.atividade .status.pendente { border-color: #f5c2c0; background: #fdf1f0; color: #9b2c22; }

/* ——— Popup de boas-vindas dentro de um iframe baixo (só na demo) ———
 *
 * O cartão do passo 1 tem ~575px no desktop e ~720px no celular, centrado num
 * contêiner fixo sem rolagem, e o widget trava a rolagem da página. Dentro do
 * iframe da página do projeto, num celular, o botão "Mostrar onde eu fico"
 * ficava abaixo da borda e o visitante não tinha como sair do popup. Aqui o
 * passo 1 rola sozinho, e a margem automática mantém o cartão centrado
 * quando ele cabe.
 */
#sol-onb.sol-onb-cheio {
  overflow-y: auto;
  align-items: flex-start;
}
#sol-onb.sol-onb-cheio .sol-onb-cartao { margin: auto; }

@media (max-height: 560px) {
  #sol-onb.sol-onb-cheio .sol-onb-avatar { width: 64px; height: 64px; }
  #sol-onb.sol-onb-cheio .sol-onb-cartao h2 { font-size: 19px; }
  #sol-onb.sol-onb-cheio .sol-onb-cartao p,
  #sol-onb.sol-onb-cheio .sol-onb-lista { font-size: 14px; }
}

/* A atividade que o visitante abriu pelos lembretes da Sol. */
.atividade.sol-demo-destaque {
  background: #fff7ed;
  box-shadow: inset 4px 0 0 #f59e0b;
  transition: background .3s;
}

/* ——— Perguntas sugeridas no chat da Sol (só na demo) ——— */

.sol-demo-perguntas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 16px 16px;
}
.sol-demo-pergunta {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #1e3a8a;
  border-radius: 999px;
  padding: 7px 14px;
  font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  text-align: left;
}
.sol-demo-pergunta:hover:not(:disabled) { background: #e0e7ff; border-color: #a5b4fc; }
.sol-demo-pergunta:disabled { opacity: .5; cursor: wait; }
.sol-demo-pergunta-colar::before { content: "📋 "; }
.sol-demo-fim { margin: 0; font: 14px/1.5 system-ui, sans-serif; color: #475569; }
.sol-demo-fim button {
  border: 0;
  background: none;
  color: #1e3a8a;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
#kai-chat-input[readonly] { background: #f8fafc; cursor: default; }
/*
 * O histórico do chat tem 260px de altura mínima no CSS do plugin. Num
 * iframe baixo isso empurra as perguntas sugeridas para fora da área visível
 * do modal; na Sol real não há perguntas abaixo do campo, então lá não pesa.
 */
@media (max-height: 760px) {
  #kai-chat-log { min-height: 150px; }
}
/* Sem digitação livre, o "Enviar" vira enfeite: some. */
#kai-chat-send { display: none; }

/* ——— Celular ——— */

@media (max-width: 767.98px) {
  .navbar-toggler { display: block; }
  .primary-navigation, .usernav .separador, .usernav .icone, .avatar-usuario .seta { display: none; }
  .marca small { display: none; }
  .secondary-navigation ul { padding: 0 8px; }
  .secondary-navigation a { padding: 8px 10px; font-size: 15px; }
  .page { padding: 14px 14px 40px; }
  .aviso-demo { margin: 14px 14px 0; }
  h1.titulo-curso { font-size: 26px; }
  .conteudo-curso { padding: 4px 16px 18px; }
  .atividade { flex-wrap: wrap; }
  .atividade .status { margin-left: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}