/*
  Central da Materia - estilos compartilhados das disciplinas do 1o ao 10o semestre.

  Usado pelas paginas:
  - paginas/semestre-01/*.html
  - paginas/semestre-02/*.html
  - paginas/semestre-03/*.html
  - paginas/semestre-04/*.html
  - paginas/semestre-05/*.html
  - paginas/semestre-06/*.html
  - paginas/semestre-07/*.html
  - paginas/semestre-08/*.html
  - paginas/semestre-09/*.html
  - paginas/semestre-10/*.html

  Objetivo:
  - manter um unico padrao visual para cabeçalho de materia;
  - manter um unico padrao visual para cards de exercicios;
  - reduzir CSS duplicado dentro dos HTMLs dos semestres.
*/

:root {
  --cm-surface: #f7fbff;
  --cm-surface-hover: #ffffff;
  --cm-border-soft: #c8d8ea;
  --cm-border-hover: #8fbce8;
  --cm-tag-bg: #e8eef7;
  --cm-tag-text: #25618f;
  --cm-progress-soft: #d6e4f5;
  --cm-primary: #0071bc;
  --cm-primary-hover: #005a96;
}

/* ============================================================
   Cabeçalho da materia
   Martelo e estatua decorativos com conteudo acima das imagens.
   ============================================================ */
.cm-materia-header {
  background: linear-gradient(135deg, rgba(13,45,94,0.82) 0%, rgba(10,74,138,0.75) 50%, rgba(0,113,188,0.70) 100%),
              url('../paginas/img/img-cabecalho-todas-paginas.png') center/cover no-repeat;
  border-radius: 12px;
  padding: 32px 28px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}

.cm-header-martelo,
.cm-header-estatua {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  opacity: 0.34;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.20));
}

.cm-header-martelo {
  left: 18px;
  bottom: -18px;
  width: 150px;
  max-width: 24%;
}

.cm-header-estatua {
  right: 26px;
  bottom: 0;
  width: 86px;
  max-width: 16%;
  max-height: calc(100% - 12px);
}

.cm-materia-numero,
.cm-materia-info,
.cm-materia-stats {
  position: relative;
  z-index: 1;
}

.cm-materia-numero {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
}

.cm-materia-info { flex: 1; }

.cm-materia-nome {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Chakra Petch', sans-serif;
  margin-bottom: 4px;
}

.cm-materia-desc {
  font-size: 0.95rem;
  color: #c6d7f2;
}

.cm-materia-stats {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-shrink: 0;
}

.cm-stat {
  background: rgba(0,0,0,0.35);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cm-stat-icon {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.cm-stat-valor {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.cm-stat-label {
  font-size: 0.72rem;
  color: #c6d7f2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   Abas de fonte dos exercícios (Guia Oficial / Material da
   Disciplina / Questões Complementares)
   ============================================================ */
.ex-fonte-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e5ecf9;
  padding-bottom: 0;
}

.ex-fonte-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.ex-fonte-tab-btn:hover {
  color: #0071bc;
}

.ex-fonte-tab-btn.ativa {
  color: #0071bc;
  border-bottom-color: #0071bc;
}

.ex-fonte-painel {
  display: none;
}

.ex-fonte-painel.ativo {
  display: block;
}

.ex-fonte-vazio {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 0.95rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

body.tema-escuro .ex-fonte-tabs {
  border-bottom-color: var(--de-card-alt, #2d3748);
}

body.tema-escuro .ex-fonte-tab-btn {
  color: var(--de-text-dim, #9ca3af);
}

body.tema-escuro .ex-fonte-vazio {
  background: var(--de-card-alt, #1f2937);
  border-color: var(--de-card-alt, #374151);
  color: var(--de-text-dim, #9ca3af);
}

/* ============================================================
   Cards da seção Exercicios
   Mesmo padrão visual adotado nos cards do index.
   ============================================================ */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.ex-card {
  display: flex;
  flex-direction: column;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-soft);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15, 52, 90, 0.08);
}

.ex-card:hover {
  background: var(--cm-surface-hover);
  border-color: var(--cm-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15, 52, 90, 0.12);
}

.ex-card-num {
  width: 32px;
  height: 32px;
  background: #0071bc;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.ex-card-titulo {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 6px;
  line-height: 1.3;
}

.ex-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.ex-tag {
  background: var(--cm-tag-bg);
  color: var(--cm-tag-text);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.ex-card-meta {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 10px;
}

.ex-card-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #6b7280;
  margin-bottom: 10px;
}

.ex-card-prog-bar {
  flex: 1;
  height: 4px;
  background: var(--cm-progress-soft);
  border-radius: 10px;
  overflow: hidden;
}

.ex-card-prog-fill {
  height: 100%;
  background: #27ae60;
  border-radius: 10px;
}

.btn-iniciar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  background: var(--cm-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, opacity 0.2s;
}

.btn-iniciar:hover {
  background: var(--cm-primary-hover);
  text-decoration: none;
}

.ex-card a,
.ex-card a:hover {
  text-decoration: none;
}

/* ============================================================
   Responsivo comum
   Mantém o cabeçalho e os exercícios legíveis em telas pequenas.
   ============================================================ */
@media (max-width: 768px) {
  .cm-materia-header {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 10px;
    padding: 20px 14px 14px;
    border-radius: 12px;
  }

  .cm-header-martelo {
    width: 82px;
    max-width: 32%;
    left: 8px;
    bottom: -14px;
    opacity: 0.22;
  }

  .cm-header-estatua {
    width: 48px;
    max-width: 26%;
    right: 8px;
    opacity: 0.18;
  }

  .cm-materia-numero {
    width: 32px;
    height: 32px;
    font-size: 0.82rem;
    margin-top: 2px;
  }

  .cm-materia-info {
    min-width: 0;
  }

  .cm-materia-nome {
    font-size: 0.98rem;
    line-height: 1.15;
    margin-bottom: 5px;
    max-width: 96%;
  }

  .cm-materia-desc {
    font-size: 0.72rem;
    line-height: 1.32;
    max-width: 96%;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }

  .cm-materia-stats {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(54px, 1fr));
    gap: 5px;
    margin-top: 2px;
  }

  .cm-stat {
    min-width: 0;
    padding: 8px 4px;
    border-radius: 9px;
  }

  .cm-stat-valor {
    font-size: 1rem;
  }

  .cm-stat-label {
    font-size: 0.48rem;
    letter-spacing: 0.15px;
    line-height: 1.05;
    white-space: nowrap;
    transform: scaleX(0.95);
    transform-origin: center;
  }

  .ex-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .cm-materia-header {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 18px 12px 12px;
    column-gap: 8px;
    row-gap: 9px;
  }

  .cm-materia-numero {
    width: 29px;
    height: 29px;
    font-size: 0.72rem;
  }

  .cm-materia-nome {
    font-size: 0.9rem;
  }

  .cm-materia-desc {
    font-size: 0.66rem;
    line-height: 1.28;
  }

  .cm-stat {
    padding: 8px 3px;
  }

  .cm-stat-valor {
    font-size: 0.9rem;
  }

  .cm-stat-label {
    font-size: 0.42rem;
  }
}

/* ============================================================
   Tema escuro compartilhado
   Serve para as paginas dos semestres 1 a 10 quando o body recebe
   a classe .tema-escuro. Mantem o mesmo azul padrao dos botoes.
   ============================================================ */
body.tema-escuro {
  background: #080b12;
  color: #e2e8f0;
}

body.tema-escuro .cm-sidebar-nav,
body.tema-escuro .cm-progress-box,
body.tema-escuro .cm-section {
  background: #121c2b;
  border-color: rgba(148,163,184,0.20);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

body.tema-escuro .cm-nav-item {
  color: #cbd5e1;
  border-bottom-color: rgba(148,163,184,0.14);
}

body.tema-escuro .cm-nav-item:hover,
body.tema-escuro .cm-nav-item.ativo {
  background: rgba(0,113,188,0.16);
  color: #7cc0ef;
}

body.tema-escuro .cm-progress-title,
body.tema-escuro .cm-section-title,
body.tema-escuro .ex-card-titulo,
body.tema-escuro .sim-card-titulo {
  color: #f8fafc;
}

body.tema-escuro .cm-progress-item,
body.tema-escuro .cm-section-sub,
body.tema-escuro .ex-card-meta,
body.tema-escuro .ex-card-prog,
body.tema-escuro .sim-card-meta {
  color: #94a3b8;
}

body.tema-escuro .cm-progress-item span:last-child {
  color: #e2e8f0;
}

body.tema-escuro .cm-prog-bar-wrap,
body.tema-escuro .ex-card-prog-bar {
  background: rgba(255,255,255,0.07);
}

body.tema-escuro .cm-section-header {
  border-bottom-color: rgba(148,163,184,0.18);
}

body.tema-escuro .cm-section-header:hover {
  background: rgba(0,113,188,0.10);
}

body.tema-escuro .cm-section-body {
  background: #121c2b;
}

body.tema-escuro .ex-card {
  background: #182435;
  border-color: rgba(148,163,184,0.24);
  box-shadow: 0 2px 12px rgba(0,0,0,0.30);
}

body.tema-escuro .ex-card:hover {
  background: #1d2b40;
  border-color: rgba(124,192,239,0.42);
  box-shadow: 0 4px 20px rgba(0,113,188,0.18);
}

body.tema-escuro .ex-card-num,
body.tema-escuro .btn-iniciar,
body.tema-escuro .sim-card-status.status-novo {
  background: var(--cm-primary);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,113,188,0.28);
}

body.tema-escuro .btn-iniciar:hover,
body.tema-escuro .sim-card-status.status-novo:hover {
  background: var(--cm-primary-hover);
}

body.tema-escuro .ex-tag,
body.tema-escuro .cm-nav-badge {
  background: rgba(0,113,188,0.18);
  color: #7cc0ef;
}

body.tema-escuro .sim-card {
  background: #182435;
  border-color: rgba(148,163,184,0.24);
}

body.tema-escuro .sim-card:hover {
  background: #1d2b40;
  border-color: rgba(124,192,239,0.42);
}

body.tema-escuro .cm-em-breve {
  background: rgba(0,113,188,0.10);
  border-color: rgba(124,192,239,0.28);
  color: #cbd5e1;
}

/* Cursos em Video: card com explicacao visivel abaixo da capa.
   Usa !important porque as paginas antigas ainda possuem CSS .va-* inline. */
.cm-cursos-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.cm-curso-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: #fff !important;
}

.cm-curso-thumb {
  display: block !important;
  flex: none !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 6px 6px 0 0 !important;
}

.cm-curso-thumb iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.cm-curso-info {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 174px !important;
  padding: 11px 12px 12px !important;
  background: #fff !important;
}

.cm-curso-info .va-card-titulo {
  display: block !important;
  padding: 0 !important;
  color: #0f172a !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.cm-curso-meta {
  display: block !important;
  margin-top: 6px !important;
  color: #0071bc !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.cm-curso-desc {
  display: -webkit-box !important;
  flex: 1 1 auto !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 8px 0 10px !important;
  color: #475569 !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
}

.cm-curso-btn {
  display: inline-flex !important;
  margin-top: auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 34px !important;
  border-radius: 6px !important;
  background: #0071bc !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.cm-curso-btn:hover {
  background: #005a96 !important;
}

body.tema-escuro .cm-curso-card,
body.tema-escuro .cm-curso-info {
  background: #182435 !important;
}

body.tema-escuro .cm-curso-info .va-card-titulo {
  color: #f8fafc !important;
}

body.tema-escuro .cm-curso-desc {
  color: #cbd5e1 !important;
}

@media (max-width: 760px) {
  .cm-cursos-grid {
    grid-template-columns: 1fr !important;
  }

  .cm-curso-thumb {
    height: auto !important;
  }

  .sim-card-meta,
  .va-card-desc,
  .va-card-descricao,
  .va-card-texto,
  .cv-link-desc,
  .cv-link-meta,
  .cm-curso-desc,
  .dl-item-meta,
  .anotacoes-area {
    text-align: justify !important;
    text-align-last: left !important;
    hyphens: auto !important;
  }

  .sim-card-meta,
  .cm-curso-desc,
  .dl-item-meta {
    line-height: 1.42 !important;
  }

  .anotacoes-area {
    line-height: 1.5 !important;
  }
}