/* ============================================================
   SENAI Cursos TI — style.css
   
   POR QUÊ USAR VARIÁVEIS CSS?
   Em vez de repetir #CC0000 em 50 lugares, definimos uma vez
   aqui. Para mudar a cor primária do site inteiro, basta
   alterar --cor-primaria. É assim que sistemas de design
   profissionais funcionam (ex: Figma Tokens, Tailwind).
   ============================================================ */

/* ----------------------------------------------------------
   1. GOOGLE FONTS
   Rajdhani: display moderno e técnico (perfeito pra TI)
   Source Sans 3: corpo limpo e legível
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Source+Sans+3:wght@300;400;600&display=swap');

/* ----------------------------------------------------------
   2. VARIÁVEIS — TEMA CLARO (padrão)
   Aplicadas quando data-theme="light" ou por padrão
   ---------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Cores da marca SENAI */
  --cor-primaria:       #CC0000;
  --cor-primaria-hover: #a30000;
  --cor-primaria-suave: #fff0f0;

  /* Fundo e superfícies */
  --bg-pagina:     #f5f4f4;
  --bg-card:       #ffffff;
  --bg-header:     #ffffff;
  --bg-input:      #ffffff;
  --bg-filtro-ativo: #CC0000;

  /* Textos */
  --texto-principal:  #1a1a1a;
  --texto-secundario: #555555;
  --texto-suave:      #888888;

  /* Bordas */
  --borda:        #e0dede;
  --borda-foco:   #CC0000;

  /* Sombras */
  --sombra-card:   0 2px 8px rgba(0,0,0,0.08);
  --sombra-header: 0 2px 12px rgba(0,0,0,0.08);

  /* Status dos cursos */
  --status-disponivel-bg:   #e8f5e9;
  --status-disponivel-text: #2e7d32;
  --status-encerrado-bg:    #fce4ec;
  --status-encerrado-text:  #c62828;
}

/* ----------------------------------------------------------
   3. VARIÁVEIS — TEMA ESCURO
   Aplicadas quando data-theme="dark"
   ---------------------------------------------------------- */
[data-theme="dark"] {
  --cor-primaria:       #ff3333;
  --cor-primaria-hover: #ff6666;
  --cor-primaria-suave: #2a0000;

  --bg-pagina:     #111111;
  --bg-card:       #1e1e1e;
  --bg-header:     #161616;
  --bg-input:      #252525;
  --bg-filtro-ativo: #ff3333;

  --texto-principal:  #f0efef;
  --texto-secundario: #aaaaaa;
  --texto-suave:      #666666;

  --borda:        #2e2e2e;
  --borda-foco:   #ff3333;

  --sombra-card:   0 2px 12px rgba(0,0,0,0.4);
  --sombra-header: 0 2px 16px rgba(0,0,0,0.5);

  --status-disponivel-bg:   #0a2e0d;
  --status-disponivel-text: #66bb6a;
  --status-encerrado-bg:    #2a0a0a;
  --status-encerrado-text:  #ef9a9a;
}

/* ----------------------------------------------------------
   4. RESET E BASE
   Remove estilos padrão do navegador que atrapalham
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--bg-pagina);
  color: var(--texto-principal);
  /* Transição suave ao trocar de tema */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ----------------------------------------------------------
   5. HEADER
   ---------------------------------------------------------- */
header {
  background-color: var(--bg-header);
  border-bottom: 3px solid var(--cor-primaria);
  box-shadow: var(--sombra-header);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

/* Logo / título do site */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-badge {
  background-color: var(--cor-primaria);
  color: #ffffff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.logo-texto {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--texto-principal);
  letter-spacing: 0.02em;
}

/* Botão de alternar tema */
.btn-tema {
  background: none;
  border: 1.5px solid var(--borda);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--texto-secundario);
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-tema:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

/* ----------------------------------------------------------
   6. HERO — Seção de apresentação
   ---------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, #800000 100%);
  color: #ffffff;
  padding: 48px 24px;
  text-align: center;
}

.hero h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(28px, 5vw, 42px); /* cresce com a tela */
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.hero p {
  font-size: 17px;
  opacity: 0.88;
  max-width: 560px;
  margin: 0 auto;
}

/* ----------------------------------------------------------
   7. BARRA DE BUSCA E FILTROS
   ---------------------------------------------------------- */
.controles {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Campo de busca */
.busca-wrapper {
  position: relative;
}

.busca-wrapper .icone-busca {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  font-size: 18px;
  pointer-events: none;
}

#campo-busca {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  background-color: var(--bg-input);
  color: var(--texto-principal);
  font-size: 15px;
  font-family: 'Source Sans 3', sans-serif;
  transition: border-color 0.2s;
}

#campo-busca:focus {
  outline: none;
  border-color: var(--borda-foco);
}

#campo-busca::placeholder {
  color: var(--texto-suave);
}

/* Botões de filtro por área */
.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.filtros span {
  font-size: 13px;
  color: var(--texto-suave);
  margin-right: 4px;
}

.btn-filtro {
  padding: 6px 16px;
  border: 1.5px solid var(--borda);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--texto-secundario);
  font-size: 13px;
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-filtro:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

/* Filtro ativo/selecionado */
.btn-filtro.ativo {
  background-color: var(--bg-filtro-ativo);
  border-color: var(--bg-filtro-ativo);
  color: #ffffff;
  font-weight: 600;
}

.grupo-filtro {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Contador de resultados */
.contador {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 0;
  font-size: 13px;
  color: var(--texto-suave);
}

/* ----------------------------------------------------------
   8. GRID DE CURSOS
   ---------------------------------------------------------- */
#lista-cursos {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 48px;
  display: grid;
  /* auto-fill: cria colunas automaticamente conforme o espaço */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* ----------------------------------------------------------
   9. CARD DE CURSO
   ---------------------------------------------------------- */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Animação de entrada */
  animation: fadeInUp 0.3s ease both;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Linha superior do card: área + status */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Badge de área (Redes, Cloud, etc.) */
.badge-area {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 4px;
  background-color: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  user-select: none;
}

.badges-areas {
  display: flex;
  gap: 6px;
  padding-right: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;
  flex-wrap: nowrap;
  
  scrollbar-width: none;
  cursor: grab;

  user-select: none; /* Evita seleção de texto ao arrastar */
  -webkit-user-select: none;
}

.badges-areas:active {
  cursor: grabbing;
}

/* Esconde scrollbar (opcional, mais clean) */
.badges-areas::-webkit-scrollbar {
  display: none; /* Esconde a barra, mas mantém a funcionalidade de scroll */
}

.badges-areas::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

/* Badge de status */
.badge-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
}

.badge-status.disponivel {
  background-color: var(--status-disponivel-bg);
  color: var(--status-disponivel-text);
}

.badge-status.encerrado {
  background-color: var(--status-encerrado-bg);
  color: var(--status-encerrado-text);
}

.badge-modalidade {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--cor-primaria);
  color: var(--cor-primaria);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-curso {
  display: inline-block;
  padding: 7px 16px;
  background-color: var(--cor-primaria);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.badge-modalidade.ead {
  border-color: #1976d2;
  color: #1976d2;
}

.badge-modalidade.presencial {
  border-color: #2e7d32;
  color: #2e7d32;
}

/* Nome do curso */
.card-titulo {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--texto-principal);
  line-height: 1.3;
  min-height: 2.6em; /* Garante altura mínima para 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Descrição */
.card-descricao {
  font-size: 14px;
  color: var(--texto-secundario);
  line-height: 1.5;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--cor-primaria) transparent; /* Firefox */
  overflow: auto;
  max-height: 100px; /* Limita a altura da descrição */
  flex: 1; /* empurra o rodapé do card para baixo */
}

/* Rodapé: carga horária + link */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
}

.card-carga {
  font-size: 13px;
  color: var(--texto-suave);
}

.card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-curso {
  display: inline-block;
  padding: 7px 16px;
  background-color: var(--cor-primaria);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.btn-curso:hover {
  background-color: var(--cor-primaria-hover);
}

/* Cursos encerrados ficam semi-transparentes */
.card.encerrado {
  opacity: 0.65;
}

/* ----------------------------------------------------------
   10. ESTADO VAZIO (nenhum resultado encontrado)
   ---------------------------------------------------------- */
.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--texto-suave);
}

.vazio .icone-vazio {
  font-size: 48px;
  margin-bottom: 12px;
}

.vazio p {
  font-size: 16px;
}

/* ----------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------- */
footer {
  text-align: center;
  padding: 24px;
  border-top: 1px solid var(--borda);
  font-size: 13px;
  color: var(--texto-suave);
}

footer a {
  color: var(--cor-primaria);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   12. ANIMAÇÃO DE ENTRADA DOS CARDS
   Os cards aparecem suavemente ao carregar
   ---------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Delay escalonado: cada card entra um pouco depois do anterior */
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.10s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.20s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.30s; }
.card:nth-child(7) { animation-delay: 0.35s; }
.card:nth-child(8) { animation-delay: 0.40s; }

/* ----------------------------------------------------------
   13. RESPONSIVIDADE
   Em telas pequenas, ajusta o header e os controles
   ---------------------------------------------------------- */
@media (max-width: 600px) {
  .logo-texto { display: none; } /* Esconde o texto no mobile */
  .hero { padding: 32px 16px; }
  #lista-cursos { padding: 16px; gap: 14px; }
  .controles { padding: 16px 16px 0; }
}