/* =====================================================
   COMPONENTS — Edu Corporativa · HR Trends
   Botões, cards, badges, tabs, barras de progresso,
   estados vazios, skeletons e KPI cards.
   Depende de design-system.css.
   ===================================================== */

/* ═══════════════════════════
   BOTÕES
   ═══════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 10px 20px;
  border-radius: var(--raio-md);
  font-size: var(--tamanho-body);
  font-weight: 600;
  font-family: var(--fonte);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transicao);
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.btn svg { flex-shrink: 0; }

.btn-primario {
  background: var(--cor-primaria);
  color: #fff;
  border-color: var(--cor-primaria);
}
.btn-primario:hover:not(:disabled) {
  background: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
  text-decoration: none;
  color: #fff;
}
.btn-primario:active:not(:disabled) { transform: translateY(0); }

.btn-gradient {
  background: var(--cor-primaria-gradient);
  color: #fff;
  border-color: var(--cor-primaria);
  box-shadow: 0 4px 12px var(--cor-primaria-shadow);
}
.btn-gradient:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

.btn-secundario {
  background: var(--cor-secao-escura);
  color: var(--cor-texto);
  border-color: var(--cor-borda-padrao);
}
.btn-secundario:hover:not(:disabled) {
  background: var(--cor-borda-padrao);
  text-decoration: none;
  color: var(--cor-texto);
}

.btn-outline {
  background: transparent;
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.btn-outline:hover:not(:disabled) {
  background: var(--cor-primaria);
  color: #fff;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--cor-texto-suave);
  border-color: var(--cor-borda-padrao);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--cor-secao-escura);
  color: var(--cor-texto);
  text-decoration: none;
}

.btn-dark {
  background: var(--cor-secao-dark);
  color: #fff;
  border-color: var(--cor-secao-dark);
}
.btn-dark:hover:not(:disabled) {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
  text-decoration: none;
}

.btn-sm { padding: 7px 14px; font-size: var(--tamanho-small); }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* Estado loading */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ═══════════════════════════
   CARDS
   ═══════════════════════════ */
.card {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda-padrao);
  border-radius: var(--raio-md);
  padding: var(--esp-5);
  transition: all var(--transicao);
}
.card:hover {
  box-shadow: var(--sombra-lg);
  border-color: var(--cor-borda-forte);
  transform: translateY(-3px);
}

.card-curso {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda-padrao);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: all var(--transicao);
  display: flex;
  flex-direction: column;
}
.card-curso:hover {
  box-shadow: var(--sombra-lg);
  border-color: var(--cor-borda-forte);
  transform: translateY(-3px);
  text-decoration: none;
}
.card-curso-thumb {
  height: 140px;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-curso-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-curso-body {
  padding: var(--esp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-curso-titulo {
  font-size: var(--tamanho-body);
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: var(--esp-2);
  line-height: 1.4;
}
.card-curso-footer {
  margin-top: auto;
  padding-top: var(--esp-3);
}

/* ═══════════════════════════
   KPI CARDS
   ═══════════════════════════ */
.kpi-card {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda-padrao);
  border-radius: var(--raio-md);
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transicao);
}
.kpi-card:hover { box-shadow: var(--sombra-md); }

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--esp-3);
}

.kpi-icone {
  width: 32px; height: 32px;
  border-radius: var(--raio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--cor-primaria-bg);
  border: 1px solid var(--cor-primaria-border);
  color: var(--cor-primaria);
}
.kpi-icone.verde  { background: var(--cor-sucesso-bg); border-color: rgba(34,197,94,0.25); color: var(--cor-sucesso); }
.kpi-icone.azul   { background: var(--cor-info-bg); border-color: rgba(59,130,246,0.25); color: var(--cor-info); }
.kpi-icone.amarelo{ background: var(--cor-aviso-bg); border-color: rgba(245,158,11,0.25); color: var(--cor-aviso); }
.kpi-icone.roxo   { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.20); color: #7C3AED; }
.kpi-icone.laranja{ background: var(--cor-primaria-bg); border-color: var(--cor-primaria-border); color: var(--cor-primaria); }

.kpi-info { flex: 1; min-width: 0; }
.kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cor-texto-suave);
}
.kpi-valor {
  font-size: 2rem;
  font-weight: 800;
  color: var(--cor-texto);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
}
.kpi-sub {
  font-size: 0.6875rem;
  color: var(--cor-texto-muito-suave);
  margin-top: var(--esp-2);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--cor-borda-padrao);
}

/* ═══════════════════════════
   BARRA DE PROGRESSO
   ═══════════════════════════ */
.barra-progresso {
  width: 100%;
  height: 6px;
  background: var(--cor-secao-escura);
  border-radius: var(--raio-full);
  overflow: hidden;
}
.barra-progresso-fill {
  height: 100%;
  background: var(--cor-primaria);
  border-radius: var(--raio-full);
  transition: width 0.6s var(--transicao-lenta);
}
.barra-progresso-fill.verde   { background: var(--cor-sucesso); }
.barra-progresso-fill.amarelo { background: var(--cor-aviso); }
.barra-progresso-fill.gradient{
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-primaria-hover));
}

/* ═══════════════════════════
   BADGES / TAGS
   ═══════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--raio-full);
  font-size: var(--tamanho-small);
  font-weight: 600;
  line-height: 1;
}
.badge-primario { background: var(--cor-primaria-light); color: var(--cor-primaria-hover); }
.badge-dark     { background: var(--cor-secao-dark); color: #fff; }
.badge-sucesso  { background: var(--cor-sucesso-bg); color: #15803D; }
.badge-aviso    { background: var(--cor-aviso-bg); color: #B45309; }
.badge-erro     { background: var(--cor-erro-bg); color: #B91C1C; }
.badge-info     { background: var(--cor-info-bg); color: #1D4ED8; }
.badge-cinza    { background: var(--cor-secao-escura); color: var(--cor-texto-suave); }

/* ═══════════════════════════
   ALERTAS
   ═══════════════════════════ */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-md);
  border-left: 4px solid;
  margin-bottom: var(--esp-3);
}
.alerta-sucesso { background: var(--cor-sucesso-bg); border-color: var(--cor-sucesso); }
.alerta-aviso   { background: var(--cor-aviso-bg); border-color: var(--cor-aviso); }
.alerta-erro    { background: var(--cor-erro-bg); border-color: var(--cor-erro); }
.alerta-info    { background: var(--cor-info-bg); border-color: var(--cor-info); }
.alerta-titulo  { font-weight: 700; font-size: var(--tamanho-body); margin-bottom: 2px; }
.alerta-texto   { font-size: var(--tamanho-small); color: var(--cor-texto-suave); }

/* ═══════════════════════════
   TABS
   ═══════════════════════════ */
.tabs {
  display: flex;
  gap: var(--esp-1);
  border-bottom: 2px solid var(--cor-borda-padrao);
  margin-bottom: var(--esp-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 10px 16px;
  font-size: var(--tamanho-body);
  font-weight: 600;
  color: var(--cor-texto-muito-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  transition: all var(--transicao-rapida);
}
.tab:hover { color: var(--cor-texto); }
.tab.ativo  { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }

/* ═══════════════════════════
   ESTADOS VAZIOS
   ═══════════════════════════ */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--esp-9) var(--esp-5);
  gap: var(--esp-4);
}
.estado-vazio-icone {
  width: 64px; height: 64px;
  border-radius: var(--raio-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria-bg);
  border: 1px solid var(--cor-primaria-border);
  color: var(--cor-primaria);
}
.estado-vazio-titulo {
  font-size: var(--tamanho-h3);
  font-weight: 700;
  color: var(--cor-texto);
}
.estado-vazio-texto {
  font-size: var(--tamanho-body);
  color: var(--cor-texto-muito-suave);
  max-width: 36ch;
}

/* ═══════════════════════════
   SKELETON LOADERS
   ═══════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--cor-secao-escura) 25%, var(--cor-borda-padrao) 50%, var(--cor-secao-escura) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--raio-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 120px; border-radius: var(--raio-md); }

/* ═══════════════════════════
   AVATARES
   ═══════════════════════════ */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--cor-primaria-bg);
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria-border);
  flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 13px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }

/* ═══════════════════════════
   FORMULÁRIOS
   ═══════════════════════════ */
.campo-label {
  display: block;
  font-size: var(--tamanho-small);
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: 6px;
}
.campo-label .req { color: var(--cor-primaria); }

.campo-input,
.campo-textarea,
.campo-select {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--fonte);
  font-size: var(--tamanho-body);
  color: var(--cor-texto);
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda-padrao);
  border-radius: var(--raio-sm);
  outline: none;
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
.campo-input:hover,
.campo-textarea:hover,
.campo-select:hover {
  border-color: var(--cor-borda-forte);
}
.campo-input:focus,
.campo-textarea:focus,
.campo-select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-bg);
}
.campo-input::placeholder,
.campo-textarea::placeholder {
  color: var(--cor-texto-fraco);
}
.campo-input.erro { border-color: var(--cor-erro); }
.campo-input:disabled {
  background: var(--cor-secao-escura);
  color: var(--cor-texto-fraco);
  cursor: not-allowed;
}
.campo-textarea { resize: vertical; min-height: 90px; }
.campo-ajuda    { font-size: var(--tamanho-small); color: var(--cor-texto-muito-suave); margin-top: 5px; }
.campo-erro-msg { font-size: var(--tamanho-small); color: var(--cor-erro); margin-top: 5px; }

/* ═══════════════════════════
   TOASTS
   ═══════════════════════════ */
#educ-toast-container {
  position: fixed;
  bottom: var(--esp-5);
  right: var(--esp-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 12px 18px;
  border-radius: var(--raio-md);
  font-size: var(--tamanho-body);
  font-weight: 500;
  box-shadow: var(--sombra-lg);
  pointer-events: auto;
  animation: toast-in 0.3s var(--transicao) forwards;
  background: var(--cor-secao-dark);
  color: #fff;
  border-left: 3px solid var(--cor-primaria);
  max-width: 340px;
}
.toast.sucesso { border-left-color: var(--cor-sucesso); }
.toast.erro    { border-left-color: var(--cor-erro); }
.toast.aviso   { border-left-color: var(--cor-aviso); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════
   STUB (em breve)
   ═══════════════════════════ */
.stub-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--esp-9) var(--esp-5);
  gap: var(--esp-4);
}
.stub-icone {
  width: 72px; height: 72px;
  border-radius: var(--raio-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria-bg);
  border: 1px solid var(--cor-primaria-border);
  color: var(--cor-primaria);
}
.stub-titulo {
  font-size: var(--tamanho-h2);
  font-weight: 700;
  color: var(--cor-texto);
}
.stub-descricao {
  font-size: var(--tamanho-body);
  color: var(--cor-texto-muito-suave);
  max-width: 40ch;
}

/* ═══════════════════════════
   PAGINAÇÃO
   ═══════════════════════════ */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  margin-top: var(--esp-6);
}
.pagina-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cor-borda-padrao);
  border-radius: var(--raio-sm);
  font-size: var(--tamanho-small);
  font-weight: 600;
  color: var(--cor-texto-suave);
  background: var(--cor-painel);
  cursor: pointer;
  transition: all var(--transicao-rapida);
}
.pagina-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.pagina-btn.ativo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* ═══════════════════════════
   GRID DE CARDS
   ═══════════════════════════ */
.grid-cards {
  display: grid;
  gap: var(--esp-5);
}
.grid-cards-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .grid-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cards-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-cards-4,
  .grid-cards-3,
  .grid-cards-2 { grid-template-columns: 1fr; }
}

/* Status badges para cursos */
.badge-nao-iniciado {
  background: var(--cor-secao-escura);
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda-padrao);
}
.badge-andamento {
  background: var(--cor-aviso-bg);
  color: #B45309;
}
.badge-concluido {
  background: var(--cor-sucesso-bg);
  color: #15803D;
}