/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

html {
    height: 100vh;
    /* Junto com o width: 100vw do body, a barra de rolagem passa a ficar por
       cima da página em vez de encolhê-la. */
    overflow-x: hidden;
}

/* 100vw inclui a largura da barra de rolagem: a página tem sempre a largura
   da janela, então navbar e conteúdo não mudam entre páginas curtas e longas. */
body {
    width: 100vw;
}

/* Como a página não encolhe com a barra, a compensação que o Bootstrap aplica
   ao abrir um modal (padding-right inline no body) a deslocaria. */
body.modal-open {
    padding-right: 0 !important;
}

/* ---- Identidade visual do site de cursos ---- */

/* --brand-color é sobrescrita em base.html com a cor do painel de
   configurações; as variantes derivam dela. */
:root {
  --brand-color: #4c1d95;
  --brand-color-dark: color-mix(in srgb, var(--brand-color) 78%, black);
  --brand-color-light: color-mix(in srgb, var(--brand-color) 75%, white);
}

.bg-brand {
  background-color: var(--brand-color) !important;
}

.text-brand {
  color: var(--brand-color) !important;
}

.btn-brand {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: #fff;
}

.btn-brand:hover {
  background-color: var(--brand-color-dark);
  border-color: var(--brand-color-dark);
  color: #fff;
}

.btn-brand-outline {
  border: 1px solid #fff;
  color: #fff;
}

.btn-brand-outline:hover {
  background-color: #fff;
  color: var(--brand-color);
}

.footer-link {
  color: #adb5bd;
  text-decoration: none;
}

.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---- Hero (usado no bloco {% block hero %}) ---- */

.hero {
  background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-light) 100%);
  color: #fff;
  padding: 4rem 0;
}

/* ---- Cards de módulo ---- */

.modulo-card {
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  height: 100%;
}

.modulo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}

.modulo-card .card-img-top {
  height: 180px;
  object-fit: cover;
  background-color: #e9ecef;
}

/* ---- Botão flutuante (FAB) de cadastro rápido ---- */

.fab-add {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1030;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
}

/* Toasts de mensagens: abaixo da navbar e acima do conteúdo/modais. */
.mensagens-toast {
  margin-top: 4rem;
  z-index: 1090;
}

/* Barra de progresso de aulas e módulos (issue #223). */
.progresso-barra {
  width: 100%;
  height: 0.5rem;
  accent-color: var(--brand-color);
}