/* =========================
BUTTON SYSTEM - LMS PERÚ PRO
========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;

  border: none;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  text-decoration: none;

  transition: all 0.2s ease;

  gap: 2px;
}

/* =========================
PRIMARY (ACCIÓN PRINCIPAL)
========================= */
.btn-primary {
  background: #d32f2f;
  color: #fff;
}

.btn-primary:hover {
  background: #b71c1c;
  transform: translateY(-2px);
}

/* =========================
SECONDARY (NEUTRO)
========================= */
.btn-secondary {
  background: #f5f5f5;
  color: #2b2b2b;
  border: 1px solid #e5e5e5;
}

.btn-secondary:hover {
  background: #eeeeee;
}

/* =========================
SUCCESS (CONFIRMACIÓN)
========================= */
.btn-success {
  background: #2e7d32;
  color: #fff;
}

.btn-success:hover {
  background: #1b5e20;
  transform: translateY(-2px);
}

/* =========================
DANGER (ELIMINAR / ALERTA)
========================= */
.btn-danger {
  background: #b71c1c;
  color: #fff;
}

.btn-danger:hover {
  background: #8e0000;
  transform: translateY(-2px);
}

/* =========================
OUTLINE (ELEGANTE LMS)
========================= */
.btn-outline {
  background: transparent;
  border: 1px solid #d32f2f;
  color: #d32f2f;
}

.btn-outline:hover {
  background: #ffe5e5;
}

/* =========================
DISABLED
========================= */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* =========================
TABS SYSTEM - LMS PERÚ PRO
========================= */

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  margin: 4px;

  border-radius: 10px;

  border: 1px solid #eee;

  font-size: 14px;
  font-weight: 500;

  background: #d32f2f;
  color: #ffffff;

  border-color: #d32f2f;

  box-shadow: 0 6px 15px rgba(211, 47, 47, 0.25);


  cursor: pointer;

  transition: all 0.2s ease;
}

/* HOVER */
.tab:hover {
  background: #fff5f5;
  border-color: #f5c2c2;
  color: #b71c1c;
}

/* ACTIVO (IMPORTANTE LMS) */
.tab.active {
  background: orange;#d32f2f;
  color: #ffffff;

  border-color: #d32f2f;

  box-shadow: 0 6px 15px rgba(211, 47, 47, 0.25);
}

/* ICONO + TEXTO ALINEADO */
.tab {
  gap: 6px;
}


.magico {
  padding-top: 60px;
}